• Success Criterion 2.2.2
  • Conformance level A

Auto-Rotating Carousel Running Past 5 Seconds With No Pause

2.2.2 — Pause, Stop, Hide

Scenario

Setting

A fitness app's workout tracker

What’s wrong

Auto-rotating carousels/hero sliders, >5s total motion, no pause/stop control (or control only on hover).

Example 

slider.addEventListener("mouseenter", pause);
slider.addEventListener("mouseleave", resume);
// no click-based pause button exists

Why it matters

A user browsing workout plans on a touchscreen can't hover to pause, so slides change before they finish reading.

How to test

Time an auto-rotating carousel/hero slider: total motion beyond 5 seconds with no pause/stop control (or a control only reachable on hover) fails.

How to fix

Give the carousel a persistent, clickable pause control, not just a hover pause.

<button onclick="carousel.toggle()" aria-pressed="false">Pause carousel</button>
<!-- carousel.toggle() works independent of hover state -->

Outcome

Stopping the carousel on the plan they want, a user reads it fully before continuing.

Who is affected

Touch and keyboard users get no working pause since the control depends on a mouse hover state.

Learn more

Related scenarios