Overview
Carousels should be accessible via keyboard navigation and provide clear information about content structure and navigation options to screen readers.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
Tab |
Moves focus through carousel navigation controls |
|
Shift + Tab |
Moves focus backwards through carousel elements |
|
Enter / Space |
Activates focused navigation controls or items |
|
Arrow Keys |
Navigate between carousel items |
|
Home / End |
Navigate to first/last carousel item |
Semantic Markup
- Use appropriate semantic structure with <section> or <div> containers and proper heading hierarchy.
- Use aria-label to describe the carousel's purpose and content type.
- Use aria-live="polite" for dynamic content updates when items change.
- Ensure navigation buttons are properly labelled with aria-label describing their function.
- Use aria-hidden="true" for decorative elements that shouldn't be announced to screen readers.
- Consider implementing aria-current for indicating the current item or position within the carousel.