Accordion
Back to complex components
An accordion is a section of content that can be toggled opened and closed. Accordions must be checked to see if they indicate focus, and be keyboard and screen reader accessible.
WHEN I click on a closed accordion toggle button
THEN the accordion opens
AND aria-expanded is set to "true"
AND its content is read via screen reader.
WHEN I am navigating using a keyboard
AND I tab on an accordion toggle button
THEN I see a visual indicator
AND the focus indicator passess WCAG rule
AND the label is read via screen reader
WHEN I am navigating using a keyboard
AND I tab on a closed accordion toggle button
AND I press the spacebar OR enter key
THEN the accordion opens
AND aria-expanded is set to "true"
AND I press the spacebar OR enter key again
THEN the accordion closes
AND aria-expanded is set to "false",
THEN the accordion opens
AND aria-expanded is set to "true"
AND its content is read via screen reader.
WHEN I am navigating using a keyboard
AND I tab on an accordion toggle button
THEN I see a visual indicator
AND the focus indicator passess WCAG rule
AND the label is read via screen reader
WHEN I am navigating using a keyboard
AND I tab on a closed accordion toggle button
AND I press the spacebar OR enter key
THEN the accordion opens
AND aria-expanded is set to "true"
AND I press the spacebar OR enter key again
THEN the accordion closes
AND aria-expanded is set to "false",
More Information
Aria-labelledby is used to associate the accordion content with the toggle button to a screen reader.