Accordion

An accordion allows users to expand and collapse a section of content as needed. It consists of a trigger element and a content panel that is shown or hidden when the trigger is activated.

Accordions can be used when displaying content immediately is not necessary and reducing visual clutter is helpful. They are less suitable for content that users need to compare side by side, since toggling adds friction.

Accessibility Features

  • Space and Enter expand and collapse the accordion when the trigger element is focused.
  • The expanded/collapsed state must be communicated programmatically to screen readers.

Details Element

The native <details> and <summary> elements handle expand/collapse behaviour and communicate state to screen readers automatically. Using them is recommended when possible.

Example

Code Snippet

Custom Accordion

A custom accordion may be necessary, for example, when the content panel does not directly follow the trigger button in the DOM. It requires explicit attributes to communicate semantics:

  • aria-expanded on the trigger button communicates the expanded or collapsed state to screen readers.
  • If the trigger button follows the content panel in DOM order, focus must move to the panel manually when the button is pressed.
  • aria-controls points to the element the trigger controls.

Example

Code Snippet