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.

See it in action here.

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

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

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">
    <button class="accordion-trigger js-accordion-trigger" aria-controls="section1" aria-expanded="true">Section 1</button>
    <div class="content" aria-hidden="false">
      abc
    </div>
  </section>
  <section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel">
    <button class="accordion-trigger js-accordion-trigger" aria-controls="section2" aria-expanded="false">Section 2</button>
    <div class="content" aria-hidden="true">
      def
    </div>
  </section>
  <section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel">
    <button class="accordion-trigger js-accordion-trigger" aria-controls="section3" aria-expanded="false">Section 3</button>
    <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);

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,
  tabsDirection: "horizontal",
  selectedTab: 2,
  startCollapsed: false
});

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.

• New option tabsDirection: Determines if the accordion keyboard controls are horizontal or vertical

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

• Fix CJS module export – Update dependencies to fix vulnerabilities

• 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

• Update documentation

• Cleanup example HTML code

• Add support for multiple instances
• Update README with basic documentation

• Breakpoint min-width fix.

• Improved ARIA-roles for the accordion state.

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

Code released under the MIT license.

Matthias Ott
[email protected]
https://matthiasott.com
https://twitter.com/m_ott

Copyright (c) 2017–2020 Matthias Ott