What component has
|Moves focus to the next focusable element.|
|Moves focus to the previous focusable element.|
|When focus is on the accordion header of a collapsed section, expands the section.|
Roles and attributes
The list below describes roles and attributes that component already has.
|Creates a landmark region that contains the currently expanded accordion panel.|
|Set to |
|Points to the |
|Defines the accessible name for the region element. References the accordion header button that expands and collapses the region. |
Considerations for developers
- Buttons are used as the accordions so that they are tab-able by keyboard users and accessible to screen readers.
- The accordion button should have an aria-controls attribute set to the
IDof the element containing the accordion panel content.
- Each button has an aria-expanded attribute on it that is toggled between
aria-expanded="true", the content associated with it is shown, and if
aria-expanded="false"the content is hidden.
Find live examples in the A11y style guide.
- W3 accordion example has detailed information about the accordion accessible behavior.
- A11y style guide gives recommendations for the accessible components.
See more accessibility recommendations in the common Accessibility guide.