WCAG 2 accessible tab navigation to level AA using ARIA roles
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Accessible tab navigation to meet WCAG 2 using ARIA roles

Demo: WAI-ARIA accessible tab navigation


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

Which references the sections

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

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

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

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