A carousel needs controls
Rule
carousel-controls· Component patterns (best practice) · impact moderate · Static + live
Why it matters
A carousel (aria-roledescription="carousel") that rotates automatically must let users stop it and move between slides. With no controls, auto-advancing content cannot be paused (2.2.2) and slides cannot be operated by keyboard.
How to fix
Add Previous/Next buttons and a Pause/Stop control to the carousel — real
Example
<div aria-roledescription="carousel" aria-label="Promotions"><div aria-roledescription="slide">Slide 1</div></div>
<div aria-roledescription="carousel" aria-label="Promotions"><button>Pause</button><div aria-roledescription="slide">Slide 1</div></div>
WCAG success criteria
2.2.2 Pause, Stop, Hide — Level A
Moving, auto-updating or auto-playing content (e.g. carousels) that starts automatically and lasts more than 5s must offer a way to pause, stop, or hide it.
2.1.1 Keyboard — Level A
All functionality must be operable through a keyboard alone (composite widgets need roving tabindex or aria-activedescendant so every control is reachable and operable).
Standards
This rule contributes to the following standards:
WCAG A EN 301 549 Best practice
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.2.2.2, 9.2.1.1 |