Skip to content

Instantly share code, notes, and snippets.

@danielantelo

danielantelo/accessible-tabs.html

Last active October 7, 2015 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielantelo/7e343d0399572a34db58 to your computer and use it in GitHub Desktop.
Save danielantelo/7e343d0399572a34db58 to your computer and use it in GitHub Desktop.
Download ZIP
Accessible tabs
Raw
accessible-tabs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Accessible tabs</title>
<meta name="description" content="An example of how to markup accessible tabs with aria attributes">
<meta name="keywords" content="template, html, accessible, tabs, usability, ARAI, WAI-ARIA">
<style>
*[aria-hidden='true'] { display: none; }
ul.tablist { padding: 0; margin: 0; height: 30px; }
ul.tablist li { display: inline-block; list-style-type: none; }
ul.tablist li a { border: 1px solid #eee; border-bottom: none; padding: 0.8em; color: black; text-decoration: none; }
ul.tablist li a[aria-selected='true'] { background: #eee; font-weight: bold; }
ul.tablist li a:focus { text-decoration: underline; }
div.tabpanel[aria-hidden='false'] { padding: 1em; background: #eee; }
</style>
</head>
<body>
<h1>Accessible tabs</h1>
<div class="tabs">
<ul class="tablist" role="tablist">
<li role="presentation">
<a id="tab1" class="tab" href="#panel-1" role="tab" aria-controls="panel1" aria-selected="true">Tab 1</a>
</li>
<li role="presentation">
<a id="tab2" class="tab" href="#panel-2" role="tab" aria-controls="panel2" aria-selected="false">Tab 2</a>
</li>
</ul>
<div id="panel1" class="tabpanel" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">
<h2>Tab 1</h2>
<p>Lorem ipsum</p>
</div>
<div id="panel2" class="tabpanel" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
<h2>Tab 2</h2>
<p>Lorem ipsum</p>
</div>
</div>
<!-- Javascripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
/**
* Click tab event
*/
$('a.tab').click(function() {
// get current tab set
var tabset = $(this).parents('.tabs');
// set all selected attributes to false and hide all panels
$('.tab', tabset).attr('aria-selected', 'false').removeClass('active');
$('.tabpanel', tabset).attr('aria-hidden', 'true').addClass('hidden');
// set current as selected
$(this).attr('aria-selected', 'true').addClass('active');
// show relevant panel
$('#'+$(this).attr('aria-controls')).attr('aria-hidden', 'false').removeClass('hidden');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment