Overview
Expand & collapse components should be accessible via keyboard navigation and provide clear information about content state and available actions to screen readers.
Maintain adequate colour contrast (4.5:1 minimum) and make sure expand/collapse controls have sufficient size for easy interaction.
Keyboard Interactions
|
Tab |
Moves focus to expand/collapse control |
|
Shift + Tab |
Moves focus away from control (backwards) |
|
Enter / Space |
Toggles content visibility (expand/collapse) |
Semantic Markup
- Use aria-expanded="true/false" to communicate content state to assistive technologies.
- Use descriptive button text such as "Show more" or "Show less" rather than generic labels.
- Use aria-controls to associate the control with the content being expanded or collapsed.
- Ensure expanded content is properly announced when it becomes visible to screen readers.
- Consider using aria-live="polite" for dynamic content changes that should be announced.