Skip to content
WCAG 2 accessible tab navigation to level AA using ARIA roles
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
index.html
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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.