A11yTab

A fully accessible and customizable front-end component for tabs. A11yTab has minimal markup requirements so it can be used however your project demands.

DEMO

Installation

A11yTab is available at the:

Source
NPM	npm install a11ytab --save
Yarn	yarn add a11ytab
unpkg	https://unpkg.com/a11ytab

Usage

A11yTab does require minimal amount of markup to function:

<!--
  A containing element is required. This is used when initializing A11yTab
-->
<div id="a11ytab-list">
  <!--
    - A11yTab requires anchors to be used for accessibility reasons
    - Each link must have a unique id
    - The `href` attribute must point to the id of it's corresponding panel
    - Each link must have the `data-a11ytab-tab` attribute
  -->
  <a id="tab1" href="#panel1" data-a11ytab-tab>...</a>
  <a id="tab2" href="#panel2" data-a11ytab-tab>...</a>
  <a id="tab3" href="#panel3" data-a11ytab-tab>...</a>
</div>
<!--
  Each tab panel must have an unique id
-->
<div id="panel1">...</div>
<div id="panel2">...</div>
<div id="panel3">...</div>

// Import A11yTab if utilizing JS modules
import A11yTab from 'a11ytab';
 
// Create a new instance of A11yTab
// See all the A11yTab options below
const tabs = new A11yTab({
  selector: document.querySelector('#a11ytab-list'),
});
 
// Initialize your new tabs
tabs.init();

A11yTab will handle all ARIA roles/attributes, focus management, and events, which transform the original HTML into the following:

<div id="a11ytab-list" role="tablist">
  <a href="#panel1" id="tab1" data-a11ytab-tab role="tab" aria-controls="panel1" aria-selected="true" tabindex="0">...</a>
  <a href="#panel2" id="tab2" data-a11ytab-tab role="tab" aria-controls="panel2" aria-selected="false" tabindex="-1">...</a>
  <a href="#panel3" id="tab3" data-a11ytab-tab role="tab" aria-controls="panel3" aria-selected="false" tabindex="-1">...</a>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">...</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">...</div>
<div id="panel3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">...</div>

A11yTab API

Options

Property	Type	Default	Description
selector	HTMLElement	null	Containing element for tabs
tabFocus	String	null	Class to add to tabs when focused
tabBlur	String	null	Class to add to tabs when not focused
tabPanelFocus	String	null	Class to add to panel when active
tabPanelBlur	String	null	Class to add to panel when not active
focusOnLoad	Boolean	false	Move users focus to tab component on page load
afterFocusFunction	Function	null	Function to run after focusing on tab
beforeFocusFunction	Function	null	Function to run before focusing on tab
addEvents	Boolean	false	Add custom A11yTab events
eventAfterFocus	String	a11ytab:afterFocus	Name of custom event to fire after focusing on tab
eventBeforeBlur	String	a11ytab:beforeBlur	Name of custom event to fire before leaving focus on tab
hashNavigation	Boolean	false	Append focused tab id to URL
tabToFocus	HTMLElement	null	Tab element to initially make active

Methods

Name	Description
init	Initializes instance of A11yTab
destroy	Kills instance of A11yTab
prev	Focus on previously focusable tab
next	Focus on following focusable tab
focus	Focus on given tab

License

MIT License