Skip to main content

Accordions

Groups related long content into sections shown one at a time

Structure​

  • Caret: Identifies when the accordion is open or closed. Pointing down in open. Pointing right is closed.
  • Title: Identifies the title of the accordion.
  • Description: Additional text to provide context to the accordion content.
  • Body: Contains the content of an accordion.

Guidelines​

When to use​

  • You have long sections of content with similar structure, such as employees within teams.
  • You want to show only one section at a time (to keep users from being overwhelmed to support progressive disclosure).

When not to use​

  • You want to display all content on the screen at once—use a card.
  • Each section has a single associated action—use a tile.
  • The information to hide is simple and doesn’t have a repeating structure—use a collapse.

Behaviour​

TODO

Accessibility​

Keyboard navigation considerations:​

Links must be keyboard accessible via the Tab key, show a clear indication when a header is selected and opened by pressing the Enter or space key. If a panel is collapsed the content of this must not be focusable by a keyboard until expanded. The contrast ratio of focus indicators and the background must be at least 3:1

Screen reader considerations:​

  • The accordion title should have a label to indicate that it can be clicked to open.
  • Accordion button should be usable via keyboard or screen reader
  • Content should be hidden when not visible
  • Make use of appropriate aria-hidden aria-expanded tags

Visual considerations:​

The contrast ratio between text on the accordion and the background must be at least 4.5:1 Users should be able to resize the accordion up to 200%.