2.2.2 Pause, Stop, Hide

Who it helps

People with attention or cognitive disabilities find it hard to focus on a page while something moves. People who read slowly, including screen reader and magnifier users, need moving text to hold still long enough to read it.

How to meet it

• Put a visible pause or stop button next to every auto-playing carousel, ticker, slideshow and background video, ideally before it in the reading order.
• Stop the motion automatically within five seconds if you do not provide a control.
• Give auto-updating content, such as live scores or feeds, a pause control or a setting for how often it refreshes.
• Replace <marquee> and <blink> with static text; they offer no controls.
• It covers content shown alongside other content, including ads and embeds. Motion that is essential to the activity is exempt.

Examples

<marquee>Sale ends Friday. Free shipping over $50.</marquee>

.ticker-track {
  animation: scroll-left 12s linear infinite;
}

<p class="promo">Sale ends Friday. Free shipping over $50.</p>

<button type="button" id="ticker-toggle" aria-pressed="false">Pause ticker</button>
<div class="ticker"><p class="ticker-track">Sale ends Friday. Free shipping over $50.</p></div>
<script>
  const btn = document.getElementById("ticker-toggle");
  btn.addEventListener("click", () => {
    const paused = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", String(!paused));
    document.querySelector(".ticker-track").style.animationPlayState = paused ? "running" : "paused";
  });
</script>

Common mistakes

• Auto-rotating a hero carousel with no pause button.
• Hiding the pause control until hover, so keyboard and touch users cannot find it.
• Assuming the prefers-reduced-motion setting is enough on its own; W3C techniques describe a pause control on the page.
• Forgetting animated GIFs and background videos, which also move for more than five seconds.

Related criteria

• 2.3.3 Animation from Interactions
• 2.3.1 Three Flashes or Below Threshold
• 2.2.1 Timing Adjustable
• 1.4.2 Audio Control

Official W3C explanation of 2.2.2