Skip to content
WCAG 2 accessible tab navigation to level AA using ARIA roles
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
README.md Update README.md Mar 19, 2017
index.html Nested tabs and up / down arrow keys Mar 19, 2017
license.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.
  • 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

You can’t perform that action at this time.