2.2.2 Pause, Stop, Hide

What this rule means

WCAG 2.2.2 requires that users have control over moving, blinking, scrolling, and auto-updating content. The rule has two parts: (1) for content that moves, blinks, or scrolls, starts automatically, lasts more than five seconds, and is presented alongside other content, users must be able to pause, stop, or hide it; (2) for content that auto-updates, starts automatically, and is presented alongside other content, users must be able to pause, stop, hide it, or control the frequency of updates.

This criterion covers animations, auto-playing videos, scrolling news tickers, live stock quotes, auto-refreshing content areas, blinking elements, and similar dynamic content. The exception is when the movement or auto-updating is part of an activity where it is essential — for example, a progress indicator during a file upload.

Why it matters

Moving or blinking content can be severely distracting for users with attention deficit disorders or cognitive disabilities. These users may be unable to focus on the main content when animations or auto-updating elements are competing for their attention. For some users, the distraction is so severe that they cannot use the page at all.

Screen reader users face a different challenge: auto-updating content can interrupt their reading flow. If a news ticker updates while a screen reader is reading nearby content, the reading position may be disrupted or the screen reader may announce the update, breaking concentration. Users with vestibular disorders may experience dizziness or nausea from continuous motion.

Related axe-core rules

• blink — Ensures <blink> elements are not used. The <blink> element creates content that flashes on and off, which is distracting and cannot be paused by users.
• marquee — Ensures <marquee> elements are not used. The <marquee> element creates scrolling text that cannot be paused, stopped, or hidden by the user.

How to test

Identify all moving, blinking, scrolling, or auto-updating content and verify user controls exist.

1. Load the page and identify all content that moves, blinks, scrolls, or auto-updates.
2. For each moving/blinking/scrolling element that lasts more than 5 seconds, verify a pause, stop, or hide mechanism exists.
3. For auto-updating content, verify controls to pause, stop, hide, or adjust update frequency.
4. Run axe-core to detect use of deprecated <blink> and <marquee> elements.
5. Verify that pausing animations does not cause information loss — the user should be able to resume or catch up.

• Check that auto-playing videos have visible pause controls and do not restart automatically after being paused.

How to fix

Replace non-controllable animated elements with accessible alternatives that provide user controls.

Replace marquee with controllable ticker

<!-- Bad: non-accessible marquee -->
<marquee>Breaking news: Important update...</marquee>

<!-- Good: CSS animation with pause control -->
<div class="news-ticker" role="region"
  aria-label="News ticker" aria-live="off">
  <button onclick="toggleTicker()"
    aria-label="Pause news ticker"
    id="ticker-pause">Pause</button>
  <div class="ticker-content" id="ticker">
    <span>Breaking news: Important update...</span>
  </div>
</div>

Ticker CSS and JavaScript

.ticker-content {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-content span {
  display: inline-block;
  animation: scroll-left 15s linear infinite;
}

.ticker-content.paused span {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

function toggleTicker() {
  const ticker = document.getElementById('ticker');
  const btn = document.getElementById('ticker-pause');
  const isPaused = ticker.classList.toggle('paused');
  btn.textContent = isPaused ? 'Play' : 'Pause';
  btn.setAttribute('aria-label',
    isPaused ? 'Play news ticker' : 'Pause news ticker'
  );
}

Auto-updating content with controls

<div role="region" aria-label="Live feed"
  aria-live="polite" id="live-feed">
  <div class="feed-controls">
    <button onclick="toggleUpdates()"
      id="update-toggle">Pause Updates</button>
    <label>
      Update frequency:
      <select onchange="setFrequency(this.value)">
        <option value="5000">Every 5 seconds</option>
        <option value="15000">Every 15 seconds</option>
        <option value="30000" selected>Every 30 seconds</option>
        <option value="60000">Every minute</option>
        <option value="0">Manual only</option>
      </select>
    </label>
    <button onclick="refreshNow()">Refresh Now</button>
  </div>
  <div id="feed-content"><!-- Dynamic content --></div>
</div>

Common mistakes

• Using <blink> or <marquee> elements, which provide no user control over the animation.
• Auto-playing background videos with no visible pause control.
• Animated hero banners or carousels that loop indefinitely without a pause mechanism.
• Auto-refreshing data tables or dashboards without controls to pause or adjust the refresh interval.
• CSS animations that loop infinitely with no JavaScript toggle to pause them.
• Moving content that pauses on hover but provides no keyboard-accessible pause mechanism.