Accessibility
Accessible accordion requirements
Keep these considerations in mind if you're modifying the Design System or creating a custom component.
WCAG guidelines 2.1
1.3.1 Info and Relationships
Ensure that the information, structure, and relationships conveyed through the accordion's presentation can be programmatically determined or are available in text. For example, the relationship between the accordion header and the content it controls should be clear to assistive technologies.
1.4.3 Contrast (Minimum)
Ensure that text labels and icons in the accordion component have a sufficient colour contrast ratio against their background (at least 4.5:1 for normal text and 3:1 for large text).
2.1.1 Keyboard Accessible
Ensure that the accordion header buttons are focusable and can be expanded or collapsed using the keyboard, typically by pressing Enter or Space. Add keyboard support to allow users to use the arrow keys to navigate through the accordion headers.
2.4.3 Focus Order
Ensure that the accordion elements receive focus in an order that preserves meaning and operability. Typically, this means that focus moves to the contents of a section when it is expanded, and moves to the next header when a section is collapsed. When an accordion header is in focus, it must have a visible focus outline. This ensures that keyboard-only users can perceive which element within the accordion has the keyboard focus.
2.4.6 Headings and Labels
Headers should describe the topic or purpose and should be unique where possible, allowing users, particularly screen reader users, to navigate effectively.
3.2.2 On Input
Changes of context, such as expanding a panel, should be initiated only by user request and not automatically by a change in an input element or setting.
4.1.2 Name, Role, Value
For accordion headers that are interactive, use ARIA attributes to provide an accessible name, ensure the correct role is conveyed, and ensure that the component can be operated by assistive technologies. Additionally, use ARIA to indicate the expanded or collapsed state of the accordion.