WCAG 2 accessible tab navigation to level AA using ARIA roles
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
index.html update Sep 15, 2016
license.md
readme.md

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.
  • 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.0.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.

CodePen demo: WCAG ARIA accessible tab navigation


Mike Foskett @ webSemantics