< Back to Demos | Learn more at PaulJAdam.com >

WAI-ARIA Tab Panel

http://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

Blog Post on Demo: A11y Support Series, Part 1: ARIA Tab Panel Accessibility - Deque Blog

Pick your favorite fruits!

Apples

Apples are amazing!

HTML/CSS Code

<h2 style="text-align:center">Pick your favorite fruits!</h2>
<div id="tabbed-interface">
<style>
[role=tabpanel] {border-top:1px solid black; padding: .5em 0;}
[role=tablist] { padding: .2em 0;}
#tabbed-interface {border:1px solid black; text-align:center; margin:0 10%;}
</style>
<div role="tablist" aria-orientation="horizontal">
<button role="tab" aria-selected="true" id="apples-tab" aria-controls="apples-content-panel" style="font-weight:bold">Apples</button>
<button role="tab" aria-selected="false" id="bananas-tab" aria-controls="bananas-content-panel">Bananas</button>
<button role="tab" aria-selected="false" id="peaches-tab" aria-controls="peaches-content-panel">Peaches</button>
</div>
<div id="apples-content-panel" role="tabpanel" aria-labelledby="apples-tab">
<h2>Apples</h2>
<p>Apples are amazing!</p>
</div>
<div id="bananas-content-panel" role="tabpanel" aria-labelledby="bananas-tab" style="display:none">
<h2>Bananas</h2>
<p>Don't slip on your banana peel! </p>
</div>
<div id="peaches-content-panel" role="tabpanel" aria-labelledby="peaches-tab" style="display:none">
<h2>Peaches</h2>
<p>Peaches keep peaching! </p>
</div>
</div>

JavaScript Code with //comments

<script>
var tabs = document.querySelectorAll('[role=tab]'); //get all role=tab elements as a variable
for (i = 0; i < tabs.length; i++) { tabs[i].addEventListener("click", showTabPanel); } //add click event to each tab to run the showTabPanel function 
function showTabPanel(el) { //runs when tab is clicked
var tabs2 = document.querySelectorAll('[role=tab]'); //get tabs again as a different variable 
for (i = 0; i < tabs2.length; i++) {tabs2[i].setAttribute('aria-selected','false');tabs2[i].setAttribute('style','font-weight:normal');} //reset all tabs to aria-selected=false and normal font weight
el.target.setAttribute('aria-selected', 'true'); //set aria-selected=true for clicked tab
el.target.setAttribute('style', 'font-weight:bold'); //make clicked tab have bold font
var tabPanelToOpen = el.target.getAttribute('aria-controls'); //get the aria-controls value of the tab that was clicked
var tabPanels = document.querySelectorAll('[role=tabpanel]'); //get all tabpanels as a variable
for (i = 0; i < tabPanels.length; i++) { tabPanels[i].style.display = "none"; } //hide all tabpanels
document.getElementById(tabPanelToOpen).style.display = "block"; //show tabpanel who's tab was clicked
}
$('[role=tablist]').keydown(function(e) {
if (e.keyCode==37) {
$("[aria-selected=true]").prev().click().focus();
e.preventDefault(); 
}
if (e.keyCode==38) {
$("[aria-selected=true]").prev().click().focus();
e.preventDefault();
}
if (e.keyCode==39) {
$("[aria-selected=true]").next().click().focus();
e.preventDefault();
}
if (e.keyCode==40) {
$("[aria-selected=true]").next().click().focus();
e.preventDefault();
}
});
</script>  

Screen Reader Support Test Results

ARIA Tab Panel Support
Attribute/Value/IDref OS X 10.11/Safari OS X 10.11/Chrome VoiceOver iOS 9.3/Mobile Safari TalkBack Android/Chrome TalkBack Android/Firefox
role=tab Yes Yes Yes Yes Yes
role=tablist Yes Yes Yes Yes Yes
role=tabpanel + aria-labelledby Yes Yes Yes Yes No
aria-selected Yes Yes Yes Yes Yes