WCAG 2.2.2 — Pause, Stop, Hide

What this requires

Moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and is presented alongside other content must have a mechanism for the user to pause, stop, or hide it. The same applies to auto-updating content (a live ticker, an auto-rotating carousel, a re-fetched dashboard tile). The user has to be able to make it stop without losing the rest of the page.

How AI coding tools fail this

The most common failure: auto-rotating hero carousels generated without a pause control. The visual brief says "auto-advance every five seconds," the AI implements an interval, and the control to stop it either isn't there or is keyboard-inaccessible. Each rotation steals focus or scroll position from anyone reading the slide that was just replaced.

The second pattern: animated icons and CSS keyframe loops with no respect for prefers-reduced-motion. The animation runs forever, on every visit, for every visitor — including the ones whose operating system has explicitly asked sites to stop moving.

The third: scrolling marquees and ticker tapes built from scratch with requestAnimationFrame. No pause, no stop, and often no way to read the content other than waiting for the loop.

Failing examples

A carousel that auto-advances and never stops:

useEffect(() => {
  const id = setInterval(() => setIndex(i => (i + 1) % slides.length), 5000);
  return () => clearInterval(id);
}, []);

A looping animation that ignores user motion preferences:

.spinner {
  animation: spin 1s linear infinite;
}

Passing examples

A carousel with a pause control and a respect for reduced motion:

const reduced = useReducedMotion();
const [paused, setPaused] = useState(reduced);
useEffect(() => {
  if (paused) return;
  const id = setInterval(() => setIndex(i => (i + 1) % slides.length), 5000);
  return () => clearInterval(id);
}, [paused]);

return (
  <>
    <button onClick={() => setPaused(p => !p)} aria-pressed={paused}>
      {paused ? "Play" : "Pause"} carousel
    </button>
    {/* slides */}
  </>
);

A media query that turns the animation off when the user has asked:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

Edge cases

Loading spinners that resolve in under five seconds are exempt, but make them respect prefers-reduced-motion anyway — a static "Loading..." label works for everyone.
Background video counts as moving content. Either provide a pause control, or set prefers-reduced-motion to swap in a still image.
Auto-playing audio is governed by WCAG 1.4.2, not this criterion, but the same principle applies: never auto-play with sound.
Live regions (aria-live="polite") that update frequently can flood screen readers. Throttle the updates or give the user a way to pause them.
Parallax scrolling that responds to user input is generally fine; parallax that auto-animates is not.

How Jeikin handles this

Jeikin's CLI scanner flags legacy <marquee> and <blink> elements outright. For animated content, the MCP server reminds the connected AI tool to wrap CSS keyframe animations in a prefers-reduced-motion media query, and to ship a visible pause control for any auto-rotating or auto-updating widget.

The dashboard tracks each finding through resolution with a timestamped audit trail.