2.2.2 Pause, Stop, Hide

WCAG 2.2 · 2.2.2 A Operable

What it requires

For any content that moves, blinks, or scrolls automatically, starts on its own, lasts more than five seconds, and is shown alongside other content, users must be able to pause, stop, or hide it — unless the movement is essential to the activity.

The same applies to auto-updating information (such as a live news ticker, stock feed, or auto-advancing carousel): users must be able to pause, stop, or hide it, or to control how often it updates. A common, compliant pattern is a visible pause/play control on a carousel or marquee.

  • People with attention or cognitive disabilities (e.g. ADHD) who are distracted by motion and cannot focus on the surrounding content.
  • Screen-reader users, for whom content that changes underneath them resets reading position or reads unexpectedly.
  • Low-vision users using magnification, who lose track of content that scrolls or refreshes faster than they can read it.
  • People with reading disabilities who need more time, but lose text that auto-advances before they finish.

How to detect it

Checks for moving and auto-updating content
Check How
Find auto-motion Manually scan for carousels, marquees, animations, tickers, or auto-refresh that start without input and run longer than 5 seconds.
Control exists Confirm a pause, stop, or hide control is present and works.
Keyboard Tab to the control and operate it with Enter/Space — no mouse-only controls.
Screen reader Verify the control has an accessible name (e.g. "Pause slideshow") and that auto-updates don't disrupt reading.
Automated tools axe and similar tools generally cannot detect this — motion and the lack of a control require human judgement.

How to fix it

  1. Prefer not to auto-start motion; if you must, keep it under 5 seconds or make it essential.
  2. Add a visible, keyboard-operable pause/play (or stop/hide) control to carousels, marquees, and tickers.
  3. Give the control a clear accessible name that reflects its state.
  4. Pause auto-advancing on hover and focus, and respect prefers-reduced-motion.
  5. For auto-updating data, let users pause updates or set the frequency.
<div class="carousel">
  <button type="button" aria-pressed="false"
          aria-label="Pause slideshow">Pause</button>
  <!-- slides … -->
</div>

Copy-paste tests

Automated coverage

The axe-core rules blink and marquee flag failures of this criterion. Run them via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures.

Run this in the browser console

console — find auto-moving content 
// Read-only: surfaces likely auto-moving / blinking content for review.
const suspects = [...document.querySelectorAll('marquee, blink, [class*="carousel"], [class*="ticker"], [class*="slider"], [class*="marquee"]')];
document.getAnimations?.().forEach(a => { if (a.effect?.target) suspects.push(a.effect.target); });
const rows = [...new Set(suspects)].map(el => ({ tag: el.tagName, cls: el.className, text: (el.textContent || '').trim().slice(0, 40) }));
console.table(rows);
[...new Set(suspects)].forEach(el => el.style.outline = '2px solid red');
console.log('Outlined', rows.length, 'candidate(s) — review each for a pause/stop/hide control.');

What to check manually: for any animation, blink, scroll, or auto-update lasting more than 5 seconds, confirm a working mechanism to pause, stop, or hide it; and verify auto-updating info (e.g. live tickers) can be paused or its frequency controlled.