a11y-accordion-tabs

A small script (less than 1.6 KB compressed and gzipped) with zero dependencies for creating accessible accordion tabs components. Based on the accessible tabs component by @stowball.

The component is an accordion on smaller screens and switches to a tab view on larger viewports.

Demo

See it in action here.

Installation

Download or clone

Download the latest version or git clone https://github.com/matthiasott/a11y-accordion-tabs.git.

npm

npm install a11y-accordion-tabs --save-dev

Usage

First, include a11y-accordion-tabs.js (or the minified version) in your document:

<script src="a11y-accordion-tabs.js" async></script>

You can write your own styles from scratch or use the CSS file in the docs folder as a starting point and include it in your document, too.

<link rel="stylesheet" href="styles.css" />

The basic HTML structure for the accordion tabs component reads as follows:

<div class="accordion-tabs js-tabs">
  <ul role="tablist" class="tabs-tab-list">
    <li role="presentation"><a href="#section1" role="tab" id="tab1" aria-controls="section1" aria-selected="true" class="tabs-trigger js-tabs-trigger">Section 1</a></li>
    <li role="presentation"><a href="#section2" role="tab" id="tab2" aria-controls="section2" class="tabs-trigger js-tabs-trigger">Section 2</a></li>
    <li role="presentation"><a href="#section3" role="tab" id="tab3" aria-controls="section3" class="tabs-trigger js-tabs-trigger">Section 3</a></li>
  </ul>
  <section id="section1" role="tabpanel" aria-labelledby="tab1" class="tabs-panel js-tabs-panel" tabindex="0">
    <div class="accordion-trigger js-accordion-trigger" aria-controls="section1" aria-expanded="true" tabindex="0">Section 1</div>
    <div class="content" aria-hidden="false">
      abc
    </div>
  </section>
  <section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel">
    <div class="accordion-trigger js-accordion-trigger" aria-controls="section2" aria-expanded="false" tabindex="0">Section 2</div>
    <div class="content" aria-hidden="true">
      def
    </div>
  </section>
  <section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel">
    <div class="accordion-trigger js-accordion-trigger" aria-controls="section3" aria-expanded="false" tabindex="0">Section 3</div>
    <div class="content" aria-hidden="true">
      def
    </div>
  </section>
</div>

For an advanced version have a look at the demo.

By default, the script looks for all elements with the class js-tabs and turns them into an accordion tabs component automatically. But you can also instantiate the component in your JavaScript like this:

var tabs = document.getElementById("myTabs");

new AccordionTabs(tabs);

Options

a11y-accordion-tabs comes with a few options to make the component more flexible. All options can be set via either a data- attribute or a JS property on the second argument of the constructor:

new AccordionTabs(tabs, {
  breakpoint: 800,
  tabsAllowed: true,
  selectedTab: 2,
  startCollapsed: false
});

Compatibility

The functions in the script are supported by all modern browsers, including IE10+. If you need support for IE9, you might want to use this polyfill for element.classList.

Changelog

0.5.0

New option startCollapsed: Defines if the accordion should be collapsed on startup

0.4.1

Fix CJS module export – Update dependencies to fix vulnerabilities

0.4.0

Data attributes now follow the W3C naming conventions (no uppercase letters) – Improved default aria-roles in the demo HTML code – Plus / minus symbols instead of chevrons in the demo code

0.3.2

Update documentation

0.3.1

Cleanup example HTML code

0.3.0

Add support for multiple instances
Update README with basic documentation

0.2.1

Breakpoint min-width fix.

0.2.0

Improved ARIA-roles for the accordion state.

0.1.0

First basic version. Still a lot of cleanup to do. Please use with caution!

License

Code released under the MIT license.

Author

Matthias Ott
mail@matthiasott.com
https://matthiasott.com
https://twitter.com/m_ott