Skip to content

Instantly share code, notes, and snippets.

@DougCrossDesign

DougCrossDesign/Web Accessibility - Tabs

Last active November 26, 2017 00:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DougCrossDesign/144121cd9fdb0f9abbc3e4c23834b30a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DougCrossDesign/144121cd9fdb0f9abbc3e4c23834b30a to your computer and use it in GitHub Desktop.
Download ZIP
Web Accessibility - Tabs
Raw
index.html
<div id="example-wrapper">
<p>Press tab key to select first or active tab, tap the right or down arrows to navigate to next and left or top to naviagte to previous tab button.</p>
<div class="tabbed-content">
<ul class="tabs-list" role='tablist'>
<li class="current">
<a aria-controls="apples" aria-selected="true" href="#apples" id="tab-apples" role='tab' class='tab selected'>
Apples
</a>
</li>
<li>
<a aria-controls="bananas" href="#bananas" aria-selected='false' id="tab-bananas" role='tab' tabindex='-1' class='tab'>
Bananas
</a>
</li>
<li class='last'>
<a aria-controls='pears' aria-selected="false" href="#pears" id="tab-pears" role='tab' tabindex='-1' class='tab'>
Pears
</a>
</li>
</ul>
<div aria-labelledby="tab-apples" class="tab-panel current" id="apples" role='tabpanel'>
<h2>Apples</h2>
<p> Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.</p>
</div>
<div aria-labelledby="tab-bananas" class="tab-panel hidden" role='tabpanel' id="bananas">
<h2>Bananas</h2>
<p>Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.</p>
</div>
<div aria-labelledby="tab-pears" class="tab-panel hidden" id="pears" role='tabpanel'>
<h2>Pears</h2>
<p>Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.</p>
</div>
</div>
Raw
script.js
$(function(){
var index = 0;
var $tabs = $('a.tab');
$tabs.bind(
{
// on keydown,
// determine which tab to select
keydown: function(ev){
var LEFT_ARROW = 37;
var UP_ARROW = 38;
var RIGHT_ARROW = 39;
var DOWN_ARROW = 40;
var k = ev.which || ev.keyCode;
// if the key pressed was an arrow key
if (k >= LEFT_ARROW && k <= DOWN_ARROW){
// move left one tab for left and up arrows
if (k == LEFT_ARROW || k == UP_ARROW){
if (index > 0) {
index--;
}
// unless you are on the first tab,
// in which case select the last tab.
else {
index = $tabs.length - 1;
}
}
// move right one tab for right and down arrows
else if (k == RIGHT_ARROW || k == DOWN_ARROW){
if (index < ($tabs.length - 1)){
index++;
}
// unless you're at the last tab,
// in which case select the first one
else {
index = 0;
}
}
// trigger a click event on the tab to move to
$($tabs.get(index)).click();
ev.preventDefault();
}
},
// just make the clicked tab the selected one
click: function(ev){
index = $.inArray(this, $tabs.get());
setFocus();
ev.preventDefault();
}
});
var setFocus = function(){
// undo tab control selected state,
// and make them not selectable with the tab key
// (all tabs)
$tabs.attr(
{
tabindex: '-1',
'aria-selected': 'false'
}).removeClass('selected');
// hide all tab panels.
$('.tab-panel').removeClass('current');
// make the selected tab the selected one, shift focus to it
$($tabs.get(index)).attr(
{
tabindex: '0',
'aria-selected': 'true'
}).addClass('selected').focus();
// handle parent <li> current class (for coloring the tabs)
$($tabs.get(index)).parent().siblings().removeClass('current');
$($tabs.get(index)).parent().addClass('current');
// add a current class also to the tab panel
// controlled by the clicked tab
$($($tabs.get(index)).attr('href')).addClass('current');
};
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
/*Example Reset*/
#example-wrapper{
max-width: 900px;
margin: 0 auto;
width: 100%;
}
/* Tab Styles */
$tab-button-bgcolor: rgba(255,255,255,1);
$tab-button-txtcolor: rgba(0,0,0,1);
$tab-button-border-width: 1px 0px 0px 1px;
$tab-button-last-border-width: 1px 1px 0px 1px;
$tab-button-border-style: solid;
$tab-button-border-color: rgba(0,0,0,1);
$tab-button-padding: 1em;
$tab-button-font-family: 'Helvetica', Arial, sans-serif;
$tab-button-font-size: 1em;
/*Tab Content Style*/
$tab-content-font-family: 'Helvetica', Arial, sans-serif;
$tab-content-border-width: 1px;
$tab-content-border-style: solid;
$tab-content-border-color: rgba(0,0,0,1);
/*Content Div Styles*/
$tab-content-font-family: 'Helvetica', Arial, sans-serif;
$tab-content-font-size: 1em;
.tabbed-content {
ul, .tabs-list{
margin: 0;
padding: 0;
li{
/*Base*/
text-align: center;
display: inline;
float: left;
padding: 1em;
margin: 0;
/*Vars*/
border-width: $tab-button-border-width;
border-style: $tab-button-border-style;
border-color: $tab-button-border-color;
&.current{
}
&.last{
border-width: $tab-button-last-border-width;
}
a, .tab{
/* Base */
display: inline-block;
text-align: center;
height: 100%;
width: 100%;
text-decoration: none;
/* Vars */
background-color: $tab-button-bgcolor;
color: $tab-button-txtcolor;
font-family: $tab-button-font-family;
font-size: 1em;
&.selected{
}
}
}
}
.tab-panel{
display: none;
&.current {
/*Base*/
clear: both;
display: block;
padding: 1em;
text-decoration: none;
/*Vars*/
border-width: $tab-content-border-width;
border-style: $tab-content-border-style;
border-color: $tab-content-border-color;
background-color: $tab-button-bgcolor;
color: $tab-button-txtcolor;
font-family: $tab-content-font-family;
font-size: 1em;
}
}
}
Raw
Web Accessibility - Tabs
Web Accessibility - Tabs
------------------------
An example of how to use tabbed organizational elements in HTML for web accessibility. Using Aria attributes such as controls, roles, labels, labelledby and sellected to identify states process by Javascript. Including keyboard triggers for helping native navigation using arrow keys.
A [Pen](https://codepen.io/DougCrossDesign/pen/GMVWdv) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).
[License](https://codepen.io/DougCrossDesign/pen/GMVWdv/license).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment