Overview
Accordions should be accessible via keyboard navigation and provide clear information about expanded/collapsed states to screen readers.
Maintain adequate colour contrast (4.5:1 minimum) and make sure accordion headers have sufficient size for easy interaction.
Keyboard Interactions
|
Tab |
Moves focus between accordion headers |
|
Shift + Tab |
Moves focus backwards through accordion headers |
|
Enter / Space |
Toggles accordion section (expand/collapse) |
|
Arrow Keys |
Navigate between accordion headers (optional enhancement) |
Semantic Markup
- Use appropriate heading levels (<h2>, <h3>, etc.) for accordion headers to maintain document structure.
- Use aria-expanded="true/false" to communicate section state to assistive technologies.
- Use aria-controls to associate headers with their corresponding content panels.
- Use role="button" on accordion headers to indicate interactive functionality.
- Ensure accordion content is properly announced when sections expand or collapse.
- Use aria-describedby when additional context is needed for screen readers.