Name: Enabled.in - Digital Accessibility Solution Provider
Address: 807, P.T.Lee Building, Anna Salai, Chennai, India, Chennai, Tamil Nadu, 600002, IN
Telephone: +919840515647
Price range: INR

Accessible Accordion Example

Content of 1st tab

Content of 2nd tab

Content of 3rd tab

ARIA

Attribute	Element	Usage
aria-expanded=”true”	button	Set to `true` when the Accordion panel is expanded, otherwise set to `false`.
aria-controls=”ID”	button	Points to the ID of the panel which the header controls.
aria-disabled=”true”	button	If the accordion panel is expanded and is not allowed to be collapsed, then set to `true`.

Keyboard shortcuts

Keyboard navigation is supported too, here are the shortcuts:

If you focus on 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.