Accordion
Accordion
Easy to use for everyone
We have usedaria-expanded
andaria-collapsed
so that a screen reader announces the state of the accordion.
When navigating using the keyboard, use the tab button to move focus between accordions, and use the space and enter keys to open or close it.
If an input or actionable functionality is contained within an accordion, this is only accessible when the accordion is open.
If the accordion is closed, we make sure any functionality contained within the accordion is removed from the focus order.
For Assistive Technology
The accordion component consists of a button and expanded area. The button usesaria-expanded
so screen readers announce when the accordion panel is on display.aria-controls
is also applied to the button to identify which expanded area is being controlled by the button.
The expanded content usesaria-hidden
, which is set tofalse
when the accordion is collapsed andtrue
when expanded. The expanded content also has arole
ofregion
andaria-labelled
, which links to the accordion heading within the button.
Based on
The accordion component is based on the following resources:
-
Accordion Pattern, Aria Authoring Practice Guide (APG) , accessed May 2023. -
Accessible ARIA Accordions, Scott O’Hara , accessed May 2023. -
Accordion Icons: Which Signifiers Work Best?, Nielson Norman Group , accessed May 2023. -
Accessible Accordion, Aditus , accessed May 2023. -
Collapsible Sections, Inclusive Components , accessed May 2023.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.