A11y Toggle

A tiny script (less than 0.3Kb gzipped) to build accessible content toggles.

You can try the live demo.

Install

npm install --save a11y-toggle

Usage

Set up the data-a11y-toggle attribute on the toggle as well as an aria-controls attribute matching an existing id.

<button data-a11y-toggle
        type="button"
        aria-controls="content-container">Toggle content</button>

<div id="content-container">
  Here is some content that can be be toggled visible or invisible.
</div>

To make the content expanded by default, set it up like this:

<button data-a11y-toggle
        type="button"
        aria-controls="content-container"
        aria-expanded="true">Toggle content</button>

<div id="content-container" aria-hidden="false">
  Here is some content that can be be toggled visible or invisible.
</div>

Then add this in your stylesheet (feel free to scope or restrict it):

[aria-hidden="true"] {
  display: none;
}

Notes

Initial ARIA-specific attributes such as aria-expanded and aria-hidden are being added automatically.
The collapsible content does not have to live right next to the toggle, hence the aria-controls attribute in order to provide a shortcut for assistive technologies.
The toggle can be something else than a <button> however a button is preferred as it the best suited element for such an interactive task.

Tests

CasperJS is being used to run browser tests. CasperJS has some dependencies that have to be installed manually. Be sure to satisfy them before running the tests.

npm test

Deploy example

The example page is deployed through GitHub Pages.