A presentation and demo page is here: https://a11y.nicolas-hoffmann.net/tabs/
This simple script transforms this simple list of anchors to contents:
<div class="js-tabs">
<ul class="js-tablist">
<li class="js-tablist__item">
<a href="#id_first" id="label_id_first" class="js-tablist__link">1st tab</a>
</li>
<li class="js-tablist__item">
<a href="#id_second" id="label_id_second" class="js-tablist__link">2nd tab</a>
</li>
<li class="js-tablist__item">
<a href="#id_third" id="label_id_third" class="js-tablist__link">3rd tab</a>
</li>
<li class="js-tablist__item">
<a href="#id_fourth" id="label_id_fourth" class="js-tablist__link">4th tab</a>
</li>
</ul>
<div id="id_first" class="js-tabcontent">
here the content of 1st tab
</div>
<div id="id_second" class="js-tabcontent">
here the content of 2nd tab
</div>
<div id="id_third" class="js-tabcontent">
here the content of 3rd tab
</div>
<div id="id_fourth" class="js-tabcontent">
here the content of 4th tab
</div>
</div>
into shiny accessible tabs by adding ARIA attributes.
Keyboard navigation is supported, based on ARIA DP (http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel && http://www.oaa-accessibility.org/examplep/tabpanel1/):
If you focus in the tabs "buttons"
- use Up/Left to see previous tab,
- use Down/Right to see next tab
- Use "Home" to see first tab (wherever you are in tab buttons)
- Use "End" to see last tab (wherever you are in tab buttons)
If you focus in a tab content
- use Ctrl Up/left to Set focus on the tab button for the currently displayed tab
- use Ctrl PageUp to Set focus on the previous tab button for the currently displayed tab
- use Ctrl PageDown to Set focus on the next tab button for the currently displayed tab
Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).
If you need to have nested tabs, you should use jquery-accessible-nested-tabs.js which has stricter selectors.
See this issue that explains why nico3333fr#17
If there is a fragment in URL, the script detects if it is on or in a tab content, and select the tab automatically.
You can make a link to a tab (which opens it). <a href="#link-to-tab-content" class="js-link-to-tab">link to tab</a>
Fragment is added to URL if you select a tab (and can be removed using data-tabs-disable-fragment="1" on div class="js-tabs").
You can also use disabled tab (see https://a11y.nicolas-hoffmann.net/tabs/#disabled_work for a demo)
If you need a tab to be opened by default, it is possible, using data-selected="1" on the js-tablist__link you need to open. Other tabs are still available, here are the rules for this feature:
- The fragment detection has always priority on this feature;
- If there are several
data-selected="1"put on tabs (which does not make sense and should never happen), the first one will be used; - If the
data-selected="1"attribute is set on a disabled tab, of course it won't be selected.
- jQuery (others smaller libraries should be ok, but didn't test for the moment)
- a small piece of CSS
.js-tabcontent[aria-hidden=true] { display: none; } - respect the classes given above, and the convention a href="#id_fourth" id="label_id_fourth" (will improve later)
- Use attribute data-hx="hx" (ex data-hx="h2" if your tab system is after a h1) to specify Hx structure in your tabs if they don't have one in tab content (will be added, and can be hidden throught a class invisible) OR
- Indicate the hx structure contained in your tab contents, using the attribute data-existing-hx="h2"
This jQuery plugin doesn't style tabs (except .js-tabcontent[aria-hidden=true] of course), styles can be added using other classes.
A demo page is here with full docs and examples: https://a11y.nicolas-hoffmann.net/tabs/
It can be included for one, two tab systems or more in a page.
Enjoy.
P.S: this plugin is in MIT license. It couldn't be done without the precious help of @ScreenFeedFr, @sophieschuermans, @goetsu and @romaingervois.