← All criteria

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
The problem, in practice — select the image to enlarge it
A 'DailyNews' website showing two examples of uncontrollable auto-moving content compared side by side with their fixes. In the first pair, an auto-scrolling 'Breaking News' ticker moves on its own with no way to stop it, described as distracting and hard to ignore; the fix adds Pause, Play, and Hide buttons directly on the ticker bar, letting the user stop the automatic movement. In the second pair, a 'Summer Sale' advertisement banner blinks and moves on its own, described as distracting or uncomfortable; the fix adds 'Pause animation' and 'Hide animation' controls next to the banner. A summary row explains why it matters (movement and auto-updates can distract, trigger vestibular disorders, or make content hard to read), the required fix (a way to pause, stop, or hide it unless the motion is essential), and the narrow essential exceptions (live scoreboards, auctions, safety alerts, time-critical updates).

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>

Resources

  • 2.2.1 Timing Adjustable

    Different kind of timing: 2.2.1 is about time limits for completing a task (a session that expires, a form that times out); this criterion is about moving, blinking, scrolling, or auto-updating content that plays on its own and needs to be pausable.