WCAG 2.2.2: Pause, Stop, Hide
An auto-advancing carousel, a scrolling news ticker, a looping background video, a feed that refreshes on its own — for many people these are not lively, they are impossible to read past. This criterion asks that whenever content moves, blinks, scrolls, or auto-updates on its own, the user has a way to pause, stop, or hide it. Motion should be something people can switch off, not something imposed on them.
The success criterion, in full
For moving, blinking, scrolling, or auto-updating information, all of the following are true: Moving, blinking, scrolling: For any moving, blinking, or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Two branches, one idea: the user must be able to take control. The five-second window and the “in parallel with other content” condition apply to the moving/blinking/scrolling branch. The auto-updating branch has no five-second threshold — but it lets you offer a frequency control as an alternative to pause/stop/hide. “Essential” is the only exception, and it is meant to be narrow.
Who this helps
Unwanted motion is not a minor annoyance for everyone. For some people it makes a page unreadable, unusable, or physically uncomfortable. A single pause control removes the barrier:
People with attention and cognitive disabilities
Movement in the corner of the eye is one of the strongest distractions there is. For people with ADHD or attention-related disabilities, a moving element next to the text can make it impossible to hold focus and read.
Low vision users
Someone reading at high magnification sees only a small slice of the page at a time. Motion in that slice — or content that shifts as it auto-updates — disrupts reading and makes it hard to keep their place.
Screen reader users
Content that auto-updates changes the DOM underneath the reader. A live region that refreshes on its own can interrupt announcements and throw away the user's reading position.
People with vestibular disorders
Large or looping motion can trigger dizziness and nausea. Being able to stop it — and having motion respect reduced-motion preferences — keeps the page from causing physical symptoms.
People who read slowly
An auto-advancing carousel that flips before the reader finishes the slide is a classic barrier. A pause control lets people read at their own pace instead of racing a timer.
Everyone trying to concentrate
Animated ads, blinking banners, and restless tickers are broadly disliked. A way to quiet them benefits every user, not only those with disabilities.
What the requirement covers
The criterion splits automatic content into two branches. Work out which branch a piece of content falls into, then check the conditions — if they all hold and the content is not essential, a mechanism is required.
- Moving, blinking, scrolling — starts automatically. The motion begins without the user doing anything: a carousel that rotates on load, a marquee that scrolls by itself, an animation that loops. User-initiated motion is out of scope.
- Moving, blinking, scrolling — lasts more than five seconds. If the motion stops on its own within five seconds, no control is needed. Beyond five seconds, a pause/stop/hide mechanism is required.
- Moving, blinking, scrolling — in parallel with other content. The condition applies when the motion sits alongside other content the user is trying to use. A full-screen loading animation that is the only thing on the page is different from a ticker running next to an article.
- Auto-updating — starts automatically, in parallel. Feeds, tickers, live scores, and chat that refresh on their own. There is no five-second grace period here; because the updating is ongoing, a mechanism is required whenever it runs alongside other content.
- The mechanism: pause, stop, hide — or control frequency. For motion you must let users pause, stop, or hide. For auto-updating content you may instead let users control how often it updates (including turning updates off). The control must be keyboard operable and discoverable.
The “essential” exception
A control is not required when the movement or updating is genuinely essential to the activity — a progress indicator that has to move to convey progress, a live auction or multiplayer game that would break for everyone if one user paused it, or an animation whose whole point is to demonstrate motion. The bar is deliberately high: looking lively, matching a brand, or holding attention are never essential. This is distinct from 2.3.1 Three Flashes, which handles the seizure risk from rapid flashing, and from 1.4.2 Audio Control, the audio analogue of this criterion.
Pass and fail examples
✓ Passes 2.2.2
- An auto-advancing carousel with a visible, keyboard-operable pause button.
- A news ticker with Pause and Hide controls next to it.
- A live feed that lets users set the refresh interval, including “off”.
- A background video that either does not autoplay or offers a stop control.
- A brief entrance animation that finishes in under five seconds on its own.
✗ Fails 2.2.2
- A carousel that rotates forever with no way to pause or stop it.
- A scrolling marquee or stock ticker running next to content with no control.
- A feed or live score that keeps refreshing with no pause, hide, or frequency setting.
- A carousel that only pauses on hover — leaving keyboard users no option.
- A looping animated GIF longer than five seconds sitting beside the article.
Code examples
A carousel with a real pause control
The control must be a genuine, focusable button — not a hover-only behaviour — and its label should reflect its current state.
<!-- ✗ Auto-rotates with no way to stop it -->
<div class="carousel" data-autoplay>
<div class="slide">…</div>
<div class="slide">…</div>
</div>
<!-- ✓ A discoverable, keyboard-operable pause control -->
<section class="carousel" aria-roledescription="carousel"
aria-label="Latest news">
<button type="button" class="carousel-toggle"
aria-pressed="false"
onclick="toggleCarousel(this)">
Pause
</button>
<div class="slides" aria-live="off">
<div class="slide">…</div>
<div class="slide">…</div>
</div>
</section>An auto-updating ticker: pause, hide, or set frequency
For auto-updating content you can satisfy the criterion with pause/hide or by letting the user control how often it refreshes — including turning it off entirely.
<div class="ticker">
<div class="ticker-controls">
<button type="button" onclick="pauseTicker()">Pause updates</button>
<button type="button" onclick="hideTicker()">Hide ticker</button>
<label>
Update every
<select onchange="setTickerFrequency(this.value)">
<option value="5">5 seconds</option>
<option value="30">30 seconds</option>
<option value="0">Off</option>
</select>
</label>
</div>
<div class="ticker-content" aria-live="off">
AAPL 150.25 ▲ 2.5%
</div>
</div>Respecting reduced-motion in React
Honour prefers-reduced-motion so motion starts paused for users who asked for less of it — then still expose a visible control for everyone else.
function AutoCarousel({ slides }) {
const [playing, setPlaying] = useState(true)
const [index, setIndex] = useState(0)
// Start paused if the user prefers reduced motion.
useEffect(() => {
const mq = window.matchMedia("(prefers-reduced-motion: reduce)")
if (mq.matches) setPlaying(false)
}, [])
useEffect(() => {
if (!playing) return
const id = setInterval(
() => setIndex((i) => (i + 1) % slides.length),
5000
)
return () => clearInterval(id) // always clean up
}, [playing, slides.length])
return (
<section aria-roledescription="carousel" aria-label="News">
<button aria-pressed={!playing}
onClick={() => setPlaying((p) => !p)}>
{playing ? "Pause" : "Play"}
</button>
<Slide {...slides[index]} />
</section>
)
}Interactive demo
Both regions below start moving automatically, just like a real carousel and ticker. Use the Pause, Resume, and Hide controls to feel the difference between content that is imposed on you and content you can put a stop to.
Auto-advancing carousel and live ticker
Both regions start moving automatically. The controls below let you pause, resume, or hide them — the mechanism 2.2.2 requires.
Breaking News
New accessibility guidelines published for auto-playing content.
Note that pausing on hover or focus alone would not satisfy 2.2.2 — a keyboard user who never hovers, and a reader who wants the motion gone for good, both need a persistent, discoverable control like the buttons above.
Common failures
- Auto-advancing carousels and sliders that rotate on their own with no pause or stop control.
- Scrolling marquees and news tickers that move continuously beside other content with no way to halt them.
- Background animations or looping video that play automatically past five seconds with no stop mechanism.
- Auto-refreshing feeds, stock tickers, live scores, and chat that update in parallel with no pause, hide, or frequency control.
- Animated advertisements that move or blink indefinitely with no user control.
- Auto-playing GIFs longer than five seconds placed next to the content people are trying to read.
- Carousels that pause only on hover or focus, leaving keyboard and switch users with no way to stop the motion.
- Treating a decorative or brand animation as 'essential' to avoid providing a control when it carries no critical information.
- A pause control that is not keyboard operable, or that is hidden until the user hovers the moving element.
How to test for 2.2.2
- 1
Inventory every piece of automatic motion and updating
Load each page and note everything that moves, blinks, scrolls, or refreshes on its own: carousels, tickers, marquees, background video, animations, live feeds, counters. These are the elements the criterion applies to.
- 2
Apply the branch conditions
For moving/blinking/scrolling content, check whether it starts automatically, runs more than five seconds, and sits in parallel with other content. For auto-updating content, check whether it starts automatically and runs in parallel — there is no five-second exemption here.
- 3
Find the mechanism
For each in-scope element, confirm there is a pause, stop, or hide control (or, for auto-updating content, a frequency control). It must be visible and discoverable, not hidden behind a hover.
- 4
Operate the control with the keyboard only
Tab to the pause/stop/hide control and activate it with Enter or Space. The motion or updating must actually stop and stay stopped. A control that only responds to a mouse fails.
- 5
Test reduced-motion and check it is not the only remedy
Enable prefers-reduced-motion in your OS or DevTools and confirm motion is reduced or paused. Then confirm a visible on-page control still exists for users who have not set that preference.
- 6
Scrutinise every 'essential' claim
For anything shipped without a control on the grounds that it is essential, ask whether freezing it would truly lose information or break a shared real-time activity. If not, it needs a control.
For a structured audit, work through the full WCAG 2.2 checklist.
Related Success Criteria
Users can turn off, adjust, or extend time limits.
Timing is not an essential part of the event or activity.
Interruptions can be postponed or suppressed by the user.
User data is preserved when a session expires and re-authentication is required.
Users are warned of the duration of inactivity that could cause data loss.
Frequently asked questions
What does WCAG 2.2.2 Pause, Stop, Hide require?
It requires that users can control content that moves, blinks, scrolls, or auto-updates on its own. There are two branches. For moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and is shown alongside other content, you must provide a mechanism to pause, stop, or hide it. For content that auto-updates automatically and is shown alongside other content, you must provide a mechanism to pause, stop, or hide it — or to control how often it updates. The only exception is when the movement or updating is essential to an activity (a progress indicator, a live game that would break if paused). It is a Level A criterion under Guideline 2.2 Enough Time, part of WCAG since 2.0.
Where does the five-second threshold apply, and where does it not?
The five-second window only applies to the moving, blinking, or scrolling branch. If a piece of motion starts automatically but stops on its own within five seconds — a brief entrance animation, for example — no control is required. But the auto-updating branch has no such grace period: a feed, ticker, stock quote, or live score that keeps refreshing needs a pause/stop/hide mechanism (or a frequency control) regardless of how long each update takes, because the updating never really ends.
How is 2.2.2 different from 2.3.1 Three Flashes?
They cover different risks. 2.2.2 is about distraction and reading interference caused by slower motion — an auto-advancing carousel, a marquee, a blinking cursor-style element under the flash threshold. Its remedy is user control. 2.3.1 Three Flashes or Below Threshold is a safety criterion about rapid flashing that can trigger photosensitive seizures; its remedy is to not flash more than three times per second (or to stay under the general flash and red flash thresholds). Blinking in the 2.2.2 sense is slow on-and-off; flashing in the 2.3.1 sense is fast and potentially dangerous.
Is pausing on hover or focus enough to pass 2.2.2?
No. Pausing on hover or focus is a nice enhancement, but on its own it does not satisfy the criterion. A keyboard-only user may never hover, a switch or voice user may struggle to keep an element focused, and a reader who simply wants the motion gone should not have to hold the mouse over it. 2.2.2 asks for a discoverable, persistent mechanism — a real Pause, Stop, or Hide control (or a frequency setting for updates) that keeps the content still until the user chooses otherwise.
What counts as 'essential' so that no control is needed?
Essential means the information would be lost, or the activity would be fundamentally changed, if the movement or updating stopped. A progress bar has to move to be a progress bar. A live auction or multiplayer game that everyone experiences in real time cannot be paused for one user without breaking the shared activity. Animation used in a demonstration of animation is essential to that demonstration. The bar is high: convenience, branding, or 'it looks lively' are never essential. If you could freeze the content and the user would lose nothing important, you need a control.
Does prefers-reduced-motion satisfy 2.2.2 by itself?
Respecting the prefers-reduced-motion media query is strongly recommended and helps many users, but it is not a complete substitute for a visible mechanism. Not every user who is distracted by motion has set that system preference, and the criterion asks for a mechanism available in the content. The best approach is both: honor prefers-reduced-motion to reduce or pause motion automatically, and still provide an on-page pause/stop/hide control for everyone else.