Operable · Level A · 2.2.2
Pause, Stop, Hide
Anything that moves, blinks, or scrolls on its own for more than 5 seconds, or content that auto-updates (a live news ticker, an auto-refreshing feed), needs a way to pause, stop, or hide it — unless that motion or updating is essential to what the content actually is.
- Cognitive
How to recognize it
Look for content that starts moving or updating without the user asking it to, and sits alongside other content the user might be trying to read at the same time: a carousel that auto-advances, an animated background, marquee-style scrolling text, a stock ticker or social feed that keeps refreshing. If it runs automatically for more than 5 seconds (for moving/blinking/scrolling content — auto-updating content has no 5-second grace period at all) and there's no visible pause, stop, or hide control, that's the failure. This is squarely a cognitive-accessibility issue: people with attention-related disabilities find ongoing motion actively distracting from whatever else is on the page, people with reading or intellectual disabilities may not be able to read stationary text fast enough before a carousel auto-advances past it, and anyone with difficulty visually tracking moving objects loses content that scrolls by before they can process it.
How to fix it
Add a visible, keyboard-reachable pause/stop control to any auto-playing carousel, ticker, or auto-updating region — and default it to paused, or make the control genuinely easy to find, not hidden in a corner. For auto-updating content like a live feed, a way to pause or control the update frequency satisfies this even without a full stop. The exception is narrow: motion or updating that's essential to the content itself — a loading spinner, a live sports score during the actual event — doesn't need a pause control, since stopping it would remove the point of showing it at all.
Example
Avoid
<div class="carousel" data-autoplay="true" data-interval="3000"></div>
<!-- auto-advances indefinitely, no pause control -->Prefer
<div class="carousel" data-autoplay="true" data-interval="3000">
<button aria-label="Pause carousel">⏸</button>
</div>