jQuery Accessible Accordion System, using ARIA

This jQuery plugin will transform a simple list of hx and div’s into a fantastic-shiny accordion system, using ARIA.

=========================== ```

First tab

here the content of 1st tab

pweet

plop

Second tab

here the content of 2nd tab

pweet

plop

Third tab

here the content of 3rd tab

plop

Fourth tab

here the content of 4th tab

pweet

plop

``` =========================== ## How it works

Basically:

each js-accordion__header is duplicated to your-prefix-class__title into accordion contents, before being replaced by a button your-prefix-class__header
each js-accordion__panel gets a class your-prefix-class__panel
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

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)

If you focus in a accordion content

use Ctrl Up/left to Set focus on the carrousel button for the currently displayed carrousel tab
use Ctrl PageUp to Set focus on the previous carrousel button for the currently displayed carrousel tab
use Ctrl PageDown to Set focus on the next carrousel button for the currently displayed carrousel tab

And strike space or return on an accordion button to open/close it

New: if you focus on next/prev buttons

use Ctrl Up to set focus on the accordion button for the currently displayed accordion content
use Ctrl PageUp to set focus on the previous accordion button for the currently displayed accordion content
use Ctrl PageDown to set focus on the next accordion button for the currently displayed accordion content

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).

===========================

Demo

A demo page is here: http://a11y.nicolas-hoffmann.net/accordion/

It can be included for one, two accordion systems or more in a page.

Enjoy.