Accessible Accordion

Accessible Accordion Example

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.