WCAG 2.2.2 Pause, Stop, Hide: Controlling Moving Content

WCAG 2.2.2 Pause, Stop, Hide is a Level A rule that says: if content moves, blinks, scrolls, or auto-updates on its own, lasts longer than five seconds, and sits alongside other content, you must give users a way to pause, stop, or hide it. Auto-updating feeds also count — and they get no five-second grace period.

What WCAG 2.2.2 actually requires

The official W3C Understanding document splits the criterion into two parts.

For moving, blinking, or scrolling information, you need a pause/stop/hide mechanism when the motion: (1) starts automatically, (2) lasts more than five seconds, and (3) is shown in parallel with other content — unless the motion is essential to an activity.

For auto-updating information (content that refreshes itself, like a stock ticker or live news panel), you need a mechanism to pause, stop, or hide it or to control how often it updates — whenever it (1) starts automatically and (2) runs in parallel with other content. Notice there is no five-second allowance for auto-updating content; the requirement applies the moment it starts.

The five-second number is deliberate. W3C explains it “is long enough to get a user’s attention, but not so long that a user cannot wait out the distraction if necessary to use the page.” So a splash animation or a single hero transition that plays once for a few seconds and stops is fine. An indefinitely looping carousel or marquee is not.

Who this protects

W3C states plainly that “content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly as well as anyone who has trouble tracking moving objects.” In practice, 2.2.2 is one of the most important Operable criteria for:

• People with attention-related and cognitive disabilities (ADHD, intellectual disabilities). Motion in the periphery pulls focus away from the text they are trying to read, so a paragraph next to a spinning carousel becomes unreadable.
• People with low vision using screen magnifiers. When the page auto-refreshes or a slide flips, their zoomed viewport jumps and they lose their place.
• Screen reader users (NVDA, JAWS, VoiceOver). Content that changes underneath the cursor can reset the reading position or fire constant announcements, so a live ticker can make the rest of the page impossible to navigate.
• People with vestibular disorders, for whom large auto-playing motion can trigger dizziness or nausea.

Concrete failures and how to fix them

These are the patterns we see fail 2.2.2 most often, mapped to W3C’s documented failures.

Auto-advancing hero carousel (the #1 offender). A slider that rotates banners every few seconds and never stops is W3C failure F16 — scrolling/moving content with no pause mechanism. The fix is a real, labeled control that stops the rotation and that works with both mouse and keyboard.

<div class="carousel" aria-roledescription="carousel">
  <button type="button" class="carousel__toggle"
          aria-label="Pause slideshow" data-state="playing">
    ⏸ Pause
  </button>
  <!-- slides -->
</div>

toggle.addEventListener('click', () => {
  const playing = toggle.dataset.state === 'playing';
  if (playing) { clearInterval(autoplay); toggle.textContent = '▶ Play'; }
  else { autoplay = setInterval(nextSlide, 5000); toggle.textContent = '⏸ Pause'; }
  toggle.dataset.state = playing ? 'paused' : 'playing';
  toggle.setAttribute('aria-label', playing ? 'Play slideshow' : 'Pause slideshow');
});

Looping animated GIF or marquee text. A GIF that cycles forever, or a CSS/<marquee> scroll of promo text, fails once it runs past five seconds. The cleanest fix is W3C technique G152: set the GIF to stop after a number of cycles that finishes within five seconds. For motion you want to keep, swap to a <video> with native controls, or honor the user’s reduced-motion setting:

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

Note that prefers-reduced-motion is a great enhancement but is not sufficient by itself for 2.2.2 — many users who need to stop motion have not set that preference, so you still need a visible control.

Live stock ticker or auto-refreshing feed. This is the auto-updating branch, with no five-second cushion. Give users a pause button (W3C technique G4 — pause and resume) or a frequency selector. If the data is real-time and pausing would show stale, misleading numbers, resume to the current value rather than the value frozen at pause time, as W3C advises for status-style content.

Blinking promotional text. Anything that blinks for more than five seconds with no way to stop it is W3C failure F112. Limit blinking to under five seconds (W3C technique G11) or add a stop control. Do not confuse this with seizure-inducing flashing — that is the separate criterion below.

How 2.2.2 differs from its neighbors

Two criteria get confused with 2.2.2, and conflating them causes real test failures:

• 2.3.1 Three Flashes or Below Threshold is about safety — rapid flashing (three or more flashes per second) that can trigger photosensitive seizures. 2.2.2 is about distraction. A slow-blinking banner can pass 2.3.1 and still fail 2.2.2.
• 2.2.1 Timing Adjustable governs time limits on reading and interaction (session timeouts, forms that expire). 2.2.2 governs motion and updates. They are both in the “Enough Time” guideline but test different things.

How to test for 2.2.2

You can audit this criterion by hand in a few minutes — automated scanners largely cannot judge it, because deciding whether motion is “essential” or lasts “more than five seconds” requires human judgment.

1. Inventory the motion. Load each template and list everything that moves on its own: carousels, sliders, animated GIFs, marquees, tickers, background video, auto-refreshing widgets, and loading animations.
2. Time it. Anything moving past five seconds is in scope. Auto-updating content is in scope immediately.
3. Look for a control. Is there a visible, labeled pause/stop/hide button? Reaching it with the Tab key and activating it with Enter/Space is required, not optional.
4. Check the “parallel content” trigger. A full-screen loading spinner with nothing else on the page is exempt; a carousel beside your headline and copy is not.
5. Test reduced motion. Turn on your OS “reduce motion” setting and confirm non-essential animation actually stops.

Because the judgment calls here trip up both automated tools and DIY testers, this is exactly the kind of checkpoint that benefits from manual remediation and a thorough accessibility audit.

Why it matters legally

The regulatory benchmark is now explicit, not just implied. The Department of Justice’s April 2024 Title II final rule formally adopted WCAG 2.1 Level AA as the technical standard for state and local government websites — and because Level AA contains every Level A criterion, an auto-playing carousel or live ticker with no pause control falls squarely within the rule for covered entities. For private businesses, ADA Title III complaints routinely treat the same WCAG 2.1 conformance as the practical yardstick, and 2.2.2 sits at Level A — the floor, not the ceiling.

What makes moving content a distinct exposure is how the barrier is experienced. Unlike a missing alt attribute that a screen reader user hits silently, an auto-advancing slider or live feed actively interferes with the people 2.2.2 protects: it resets a screen magnifier’s viewport, fires repeating screen-reader announcements, and pulls focus from anyone with an attention-related disability trying to read the copy beside it. That is the kind of dynamic, repeatable obstruction a plaintiff’s tester can reproduce and record on camera, which is why carousels and tickers surface so often in ADA demand letters.

The overlay angle is specific to this criterion too. UsableNet’s year-end tracking found that over 1,000 of the businesses sued in 2024 had an accessibility widget already installed — and a carousel is one of the clearest illustrations of why. A bolt-on script can recolor text or expand fonts, but it has no reliable hook into the JavaScript timer driving your slider, so the moving content keeps moving and the 2.2.2 failure survives the widget entirely.

The above is background information for site owners, not legal advice; how the ADA and the DOJ rule apply to your particular site is a question for a qualified accessibility attorney.

Fixing 2.2.2 the right way

A conformant pause control has to live inside the component that owns the motion — and that is precisely what an overlay cannot reach. The control needs to call your slider’s own pause method, clear the right setInterval, or toggle your CMS carousel’s autoplay flag; a script injected over the top has no access to any of that state. So our approach to moving content is component-by-component, not a global toggle:

1. We map every auto-moving and auto-updating element across your templates — sliders, tickers, marquees, looping GIFs, background video, and live widgets.
2. For each one we wire a labeled pause/stop/hide button into the actual markup and the actual timer, make it reachable with Tab and operable with Enter/Space, and layer prefers-reduced-motion on top as a bonus, not a substitute.
3. We re-test against the five-second rule and the no-grace-period rule for auto-updating feeds, then record the outcome in a VPAT if you need conformance on paper.

This is why we are deliberately anti-overlay on this criterion specifically — there is no third-party widget that can stop a carousel it did not build. [EXPERT_NAME] and the [AGENCY_NAME] team do the integration by hand. If you are not sure which of your animations cross the five-second line, start with a free scan and we will show you exactly which moving elements fail 2.2.2.