2.2.2 Pause, Stop, Hide

Level: A | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

For any moving, blinking, scrolling, or auto-updating information, the user must be able to pause, stop, or hide it. This applies when the content starts automatically, lasts more than five seconds, and is presented in parallel with other content.

Moving content is distracting and can make it impossible for some users to focus on the rest of the page. For users with attention disorders, it can render the entire page unusable.

Who This Affects

Users with attention deficit disorders — moving content is a constant distraction that prevents focus
Users with cognitive disabilities — cannot process static content while animations compete for attention
Screen reader users — auto-updating content can cause repeated announcements that interrupt reading
Users with vestibular disorders — certain animations can cause dizziness or nausea

Common Pitfalls

1. Auto-playing video backgrounds

<!-- Bad: auto-playing video with no pause control -->
<video autoplay loop muted>
  <source src="background.mp4" type="video/mp4">
</video>

2. Scrolling news tickers

<!-- Bad: deprecated marquee element -->
<marquee>Breaking news: New accessibility standards released!</marquee>

3. CSS animations with no pause mechanism

/* Bad: infinite animation with no way to stop */
.banner {
  animation: slide 3s infinite;
}

4. Live-updating content with no pause

// Bad: stock ticker updates every second with no control
setInterval(() => {
  updateStockPrices();
}, 1000);

How to Fix

Video with pause controls

<!-- Good: video with visible controls -->
<video autoplay loop muted id="bg-video">
  <source src="background.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('bg-video').pause()">
  Pause background video
</button>

Respect prefers-reduced-motion

/* Good: disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Carousel with pause button

<!-- Good: auto-advancing carousel with visible pause control -->
<div class="carousel" role="region" aria-label="Featured products" aria-roledescription="carousel">
  <button onclick="pauseCarousel()" aria-label="Pause carousel">Pause</button>
  <div class="slides">...</div>
</div>

Auto-updating content with pause

// Good: provide a toggle to pause live updates
let isUpdating = true;
const interval = setInterval(() => {
  if (isUpdating) updateStockPrices();
}, 1000);

document.getElementById('pause-btn').addEventListener('click', () => {
  isUpdating = !isUpdating;
});

How to Test

Load the page and identify all content that moves, blinks, scrolls, or auto-updates (carousels, video backgrounds, animations, tickers, live feeds).
For each moving element that starts automatically and lasts more than 5 seconds, look for a visible Pause, Stop, or Hide control.
Verify the control is keyboard accessible (reachable by Tab, activated by Enter or Space).
Check if the site respects prefers-reduced-motion by enabling it (macOS: System Settings > Accessibility > Display > Reduce motion) and reloading.
Pass: Every auto-playing animation, carousel, or auto-updating element has a keyboard-accessible mechanism to pause, stop, or hide it.
Fail: Any moving content plays indefinitely with no way to pause, stop, or hide it.

axe-core Rules

| Rule | What It Checks | |------|---------------| | blink | Ensures <blink> elements are not used | | marquee | Ensures <marquee> elements are not used |