WCAG 2 accessible tab navigation to level AA using ARIA roles
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit 719620d Mar 19, 2017 @2kool2 committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
css update Sep 11, 2016
js Delete accessible-tabs.1.0.min.js Mar 19, 2017
README.md Update README.md Mar 19, 2017
index.html Nested tabs and up / down arrow keys Mar 19, 2017
license.md update Sep 11, 2016

README.md

Accessible tab navigation to meet WCAG 2 using ARIA roles

Demo: WAI-ARIA accessible tab navigation


Features

  • Lightweight vanilla JavaScript with zero dependencies.
  • Meets WCAG 2 level AA and uses WAI-ARIA roles.
  • Supports nested tablists.
  • Optionally switch on hover.

Basic usage

Link to styles

<link rel="stylesheet" href="css/styles.css">

The links are coded as a normal set of page anchors in a list:

<ul class="tl_list">
    <li><a href="#A">Section A</a></li>
    <li><a href="#B" class="tl_lnk-on">Section B</a></li>
    <li><a href="#C">Section C</a></li>
</ul>

Which references the sections

<section id="A" class="tl_section">
    <h2>Heading A</h2>
    <p>Copy A</p>
</section>

<section id="B" class="tl_section">
    <h2>Heading B</h2>
    <p>Copy B</p>
</section>

<section id="C" class="tl_section">
    <h2>Heading C</h2>
    <p>Copy C</p>
</section>

Include the JavaScript

<script src="js/accessible-tabs.1.1.js"></script>

There's an option to allow mouse hover to activate a tab by adding the class "hoverable" to the tablist ul.
Not sure that's such a good idea though.


Mike Foskett @ webSemantics