A carousel needs controls

Rule carousel-controls · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

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 <button> elements, or role="button" + tabindex="0" on the existing clickable arrows.

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.

Understanding 2.2.2

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).

Understanding 2.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Carousel