How to Get Accessible Carousels Right
Rotating banners and sliders, built so everyone can reach and control the content.
Marcus Adeyemi
Why does it matter?
Carousels combine automatic motion, hidden content and complex controls, which is a difficult accessibility case.
What are the numbers?
- Auto-rotation moving content needs a pause control
- Controls previous, next and slide selection need accessible names
- Hidden slides off-screen slides should not be reachable
- Announcements slide changes may need announcing
What should I do?
- Provide a visible pause control
- Give controls clear accessible names
- Keep off-screen slides out of the tab order
- Support keyboard operation fully
- Consider whether a carousel is needed at all
What should I avoid?
Avoid:
- Auto-rotating carousels with no pause
- Tabbing into hidden slides
- Icon-only controls with no names
- Essential content only in later slides
When should I get help?
Short answer Bring in help when homepage carousels fail audits.
Where this comes from
- W3C ARIA Authoring Practices Guide — Carousel pattern
- W3C Web Accessibility Initiative — Understanding Success Criterion 2.2.2 Pause, Stop, Hide
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
