Aria Tablist
Dependency-free plain JavaScript module for WCAG compliant tablists. Also great for accordions.
Key design goals and features are:
- multi and single select modes
- horizontal and vertical modes: Adjusts arrow key usage for moving focus between tabs
- progressive enhancement: Allows for only the tab and panel relationship to be indicated in the DOM, and adds
role
andaria
attributes automatically as needed - accessibility: Follows the WCAG spec by default, with options to tweak behaviour
- compatibility: Broad browser and device support (IE9+)
- starting states: Can use
aria-selected="true"
ordata-selected="true"
to indicate which tab(s) should be enabled by default. - deletion: Can enable tab (and panel) deletion using the delete key
Installation / usage
Grab from NPM and use in a module system:
npm install aria-tablist
;;
Or grab the minified JavaScript from unpkg:
The module relies entirely on standard attributes: it sets the role
on elements if it needs to, aria-
attributes for indicating behaviour to screen readers, and relies on setting and removing hidden="hidden"
to toggle element visibility. This means that you can use all of your own class names and styling, and the module won't override them.
HTML Requirements / Progressive Enhancement
When the module is called on an element, the following steps are taken:
- The module will search for
tab
elements using thetabSelector
option ('[role="tab"]'
by default). - If none are found, all direct children will be processed.
- For each assumed
tab
, the module will check for a matchingtabpanel
by:- Checking for an
aria-controls
ordata-controls
attribute on thetab
, and searching for an element with a matchingid
. - If the
tab
has anid
, searching for an element with anaria-labelledby
ordata-labelledby
attribute that matches thatid
.
- Checking for an
- For any tabs that were processed where a matching panel was not found, if they had
role="tab"
set, therole
attribute will be removed to prevent confusion to screen reader users. - The found tabs and associated panels will then have the relevant
role
andaria-
attributes set automatically.
This means your HTML only needs to indicate the relationship between the tabs and panels, and the module will handle the rest:
Panel 1 Panel 2 Panel 3 .........
So if you need to cater for users without JavaScript, or if the JavaScript fails to load for whatever reason, there won't be any applicable roles set that would confuse a screen reader user.
You can of course include all of the optimal ARIA attributes straight away if you wish, including indicating which tab should be active by default:
Apple Orange Pear .........
Options
Most of the functionality is assumed from the included ARIA attributes in your HTML (see the examples). The remaining available options and their defaults are:
All component options that accept a Function will have their context (this
) set to include the full autocomplete API (assuming you use a normal function: () {}
declaration for the callbacks instead of arrow functions).
API
The returned AriaTablist
class instance exposes the following API (which is also available on the original element's ariaTablist
property):