Skip to content


What component has

Keyboard support

Keyboard support
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Enter, SpaceWhen 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.

Roles and attributes
regiondivCreates a landmark region that contains the currently expanded accordion panel.
buttondiv, buttonThe button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality.
aria-expanded="true"buttonSet to true when the Accordion panel is expanded, otherwise set to false.
aria-controls="ID"buttonPoints to the ID of the panel which the header controls.
aria-labelledby="IDREF"divDefines the accessible name for the region element. References the accordion header button that expands and collapses the region. region elements are required to have an accessible name to be identified as a landmark.
aria-disabledThe aria-disabled state indicates that the element is perceivable but disabled, so it isn’t editable or otherwise operable.

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 ID of the element containing the accordion panel content.
  • Each button has an aria-expanded attribute on it that is toggled between true and false. If 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.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.