Accordions
Groups related long content into sections shown one at a time
Overview
Anatomy
- 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.
- Header Elements: Various optional elements such as a counter, badge, description, menu icon, and info icon. These properties can be turned on or off to provide additional context and functionality as needed.
Variants
- Background
- No background
- Chevron left
- Chevron right
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.\
📱 Mobile Considerations
Accordion components should span the full width of the screen.
The header should be kept simple, offering no secondary functionality beyond a counter property.
Behaviour
States
An accordion can be expanded or collapsed — this is a visual affordance. In addition, accordions have 2 interactive states that may affect the visual output. Available interactive states: default and focus.
- Hover state
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%.