Skip to main content

Initialization

window.addEventListener('DOMContentLoaded', () => { new A11yTabs('.tab-list', '[role="tabpanel"]', 0) })

DOM ready

You should ensure you're DOM content has loaded before you attempt to instantiate A11yTabs. This can be done with window.addEventListener('DOMContentLoaded, () => {}).

A11yTabs parameters

A11yTabs has three parameters in the following order:

  • tabListSelector (string) is a CSS selector to pointing to your tablist. This element is the parent element of your tab buttons. It must have the attribute [role="tablist"], and the child tab buttons must in turn have the attribute role="tab". These tab buttons should also contain the aria-controls attribute pointing to the ID of a corresponding tab-panel to be opened when that tab button is selected. For example:
<div role="tablist">
  <button class="tab-item tab-button" role="tab" aria-controls="panel-1">Tab 1</button>
  <button class="tab-item tab-button" role="tab" aria-controls="panel-2">Tab 2</button>
...and so on
  • panelsSelector (string) is a CSS selector to your panel items and must allow querySelectorAll to find all panels with role="tabpanel" attribute. These are the items that correspond to your tab button's aria-controls IDs earlier mentioned:
<div id="panel-1" role="tabpanel" tab-title="Tab 1">
  <div>Tab 1 content.</div>
</div>
  • activeIndex (number) optional index of the initial tab you'd like opened. Defaults to 0.