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.

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.

The accordion component is based on the following resources:

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.