jQuery Accessible Accordion System, using ARIA
A demo page is here: https://a11y.nicolas-hoffmann.net/accordion/
It can be included for one, two accordion systems or more in a page.
This jQuery plugin will transform a simple list of
div’s into a fantastic-shiny accordion system, using ARIA.
First tabhere the content of 1st tabpweetplopSecond tabhere the content of 2nd tabpweetplopThird tabhere the content of 3rd tabplopFourth tabhere the content of 4th tabpweetplop
How it works
js-accordion__headeris duplicated to
your-prefix-class__titleinto accordion contents, before being replaced by a button
js-accordion__panelgets a class
- Once the HTML markup is set up, all ARIA attributes are added to make the link between accordion buttons and accordion contents, to know which one is related to which other.
- Keyboard shortcuts of ARIA Design Pattern for accordions are added, and you can easily navigate and use it.
Keyboard navigation is supported, based on ARIA DP (http://www.w3.org/TR/wai-aria-practices/#accordion):
If you focus in the accordion "buttons"
- use Up/Left to put focus on previous accordion button,
- use Down/Right to put focus on next accordion button
- use Home to put focus on first accordion button (wherever you are in accordion buttons)
- use End to put focus on last accordion button (wherever you are in accordion buttons)
And strike space or return on an accordion button to open/close it
All options of the plugin
var defaultConfig =headersSelector: '.js-accordion__header'panelsSelector: '.js-accordion__panel'buttonsSelector: 'button.js-accordion__header'buttonsGeneratedContent: 'text' // htmlbutton:buttonSuffixId: '_tab'multiselectable: trueprefixClass: 'accordion'headerSuffixClass: '__title'buttonSuffixClass: '__header'panelSuffixClass: '__panel'direction: 'ltr' // rtlaccordionPrefixId: 'accordion';
When calling the plugin, you may set up options as you want. For example:
Will call the plugin and generate buttons keeping HTML content in the
Content opened by default
If you want to have an accordion content opened by default, just add the attribute
data-accordion-opened="true" on a
Wanna see it animated?
In the demo https://a11y.nicolas-hoffmann.net/accordion/?animated=1 , you can see it animated. I’ve changed the attribute
animated-accordion, without changing (almost) anything else to the page. Magic? No. :)
The magic is the same used for my jQuery simple and accessible hide-show system animated.
In fact, it is possible using some CSS transitions. You have to keep in mind several things to keep it accessible:
- You can’t animate the
heightproperty might be complicated too to animate.
- So you can’t use
display: none;to hide a content (even for assistive technologies).
- You have to set up
hiddento show/hide a content.
- Basically, you should animate
opacity(if needed), and use
visibilityto hide content to assistive technology.
So here is the CSS code (unprefixed):
/* This is the hidden state */[
Here is the trick: from “hidden” to “visible” state,
visibilityis immediately set up to
opacity are “normally” animated.
From “visible” to “hidden” state, the
visibility animation is delayed. So the content will be immediately hidden… at the end of the animation of max-height/opacity.
The ARIA Design Pattern for accordions (http://www.w3.org/TR/wai-aria-practices/#accordion) allows to have several accordion panels opened at the same time (which is shown by the attribute
aria-multiselectable="true"). However, you might need to avoid this for design purposes or client request. To do this, you may set this attribute on the accordion container:
This option will set up
aria-multiselectable="false" and the plugin will allow only one panel to be opened at the same time.
If the accordion is used on a RTL website, the keys will adapt themselves to it. :)