Van11y accessible tabs panel system, using ARIA
This script will transform a simple list of anchors to contents into a fantastic-shiny accessible tabpanel system, using ARIA.
The demo is here: https://van11y.net/downloads/tab-panel/demo/index.html
Website is here: https://van11y.net/accessible-tab-panel/
La page existe aussi en français : https://van11y.net/fr/onglets-accessibles/
How it works
ARIA is coming
The script adds all needed attributes to your tabs controls and panels (
Then a bit of styling classes
Then it will generate some classes for you, to allow styling your tabs as you want.
Some listeners for keyboard and mouse interactions are added, when you activate one, it will updates attributes and manage keyboard interations.
How to use it
Download the script
You may also use npm command:
npm i van11y-accessible-tab-panel-aria.
You may also use bower:
bower install van11y-accessible-tab-panel-aria.
Then, follow the conventions given in this minimal example (in bold).
- use classes needed (
- check that your anchors are working.
- for accessibility purposes (for VoiceOver), the plugin has to give focus to
h4, etc.) in tab contents.
Hx, you have two cases:
- There aren’t any in your
js-tabcontent’s, so specify in
data-hxattribute (will be added with
class="invisible", which means visually hidden);
- There are some, just tell it to the plugin using
<div class="js-tabs"> <ul class="js-tablist" data-hx="h2"> <li class="js-tablist__item"> <a href="#id_first" class="js-tablist__link">1st tab</a> </li> <li class="js-tablist__item"> <a href="#id_second" class="js-tablist__link">2nd 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>
<div class="js-tabs"> <ul class="js-tablist" data-existing-hx="h2"> <li class="js-tablist__item"> <a href="#id_first" class="js-tablist__link">1st tab</a> </li> <li class="js-tablist__item"> <a href="#id_second" class="js-tablist__link">2nd tab</a> </li> </ul> <div id="id_first" class="js-tabcontent"> <h2>title</h2> here the content of 1st tab </div> <div id="id_second" class="js-tabcontent"> <h2>other title</h2> here the content of 2nd tab </div> </div>
The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on
<div id="newContent">your tab panel source</div>:
If you focus on 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 on 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).
Logic of styling classes
You should add classes to the source, and use them this way:
The plugin has another feature: if you don’t like styling on role attributes, it can generate classes for you only for styling tabs when they are activated.
Here is an example:
<ul … data-tabs-prefix-class="last-tabs">
data-tabs-prefix-class will add classes on each elements:
<ul … class="… last-tabs-tabs__list"> <li … class="… last-tabs-tabs__item"> <a … class="… last-tabs-tabs__link">…
data-tabs-prefix-class="last-tabs" you have:
last-tabs-tabs__listfor styling the
last-tabs-tabs__itemfor styling the
last-tabs-tabs__linkfor styling the
last-tabs-tabs__contentfor styling each tab panel.
Tab panel opened by default
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 be opened (See the demo, second example).
Other tabs are still available, here are the rules for this feature:
- The fragment detection (explained below) will always have priority on this feature;
- If there are several
data-selected="1"put on tabs in the same group (which does not make sense and should never happen), the first one will be used.
Anchor added in URL
As you may notice (or not), now the script adds a fragment in the URL when you click or select a tab using the keyboard. It is cool when you want to copy/paste the link of the page you are reading, and the opened tab will be the good one! Anchor on a tab panel
If you need to make a link on your page to a id that is on a tab panel, the script will detect it and display the good tab, only for you.
If you want to test, open a new window, and copy/paste this: https://van11y.net/downloads/tab-panel/demo/index.html#id_third
Anchor in a tab panel
If you need to make a link on your page to a id that is in a tab panel, the script will detect it and display the good tab, only for you.
If you want to test, open a new window, and copy/paste this: https://van11y.net/downloads/tab-panel/demo/index.html#cool-anchor
“In-page” link to a tab panel
If you need to create in your current page a link to a tab (inside or outside), it is possible:
- Create the link to the content you want to target:
<a href="#link-to-tab">link to tab option</a>
- Add the class
- And that’s all. The plugin will make it work.