WCAG 2.2.2 Pause, Stop, Hide

What it asks

Movement on a page pulls attention. For most people that is mildly annoying. For people with attention disorders, some cognitive disabilities and some vestibular conditions, a looping animation beside a paragraph can make the paragraph unreadable, and a ticker that never stops can make the whole page unusable. Screen reader users have a different problem: content that keeps updating itself keeps interrupting what they are reading.

The rule has two halves. Moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is presented in parallel with other content must have a mechanism to pause, stop or hide it. Auto-updating content that starts automatically and sits beside other content must have a mechanism to pause, stop or hide it, or to control how often it updates.

Each half has the same exception: movement or updating that is part of an activity where it is essential. A progress bar that shows a file uploading is essential movement. A countdown that shows time left is essential updating. A hero animation that loops for effect is neither.

This is a non-interference criterion, so it applies to everything on a page, including third-party content and content left out of a conformance claim. It does not apply to content that stops on its own within five seconds, or to content the person chose to start.

Its official name is success criterion 2.2.2 Pause, Stop, Hide, at Level A. It was added in WCAG 2.2, under guideline 2.2 Enough Time and the principle Operable. The W3C’s normative text says, in part:

“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”

From WCAG 2.2, W3C. Full explanation: Understanding 2.2.2 Pause, Stop, Hide.

Who it helps

People with attention deficit disorders, who cannot stop looking at movement and so cannot read the content beside it. People with some cognitive disabilities and low literacy, who need to concentrate on text. People with vestibular disorders, for whom motion can cause nausea.

Screen reader users, whose software may reread a region every time it updates, and people with low vision using magnification, who see the movement at several times its size.

What passes and what fails

These pass

• A hero video that loops with a visible pause button that stops it.
• A carousel that stops advancing when the person uses its pause control, or when they move the mouse over it and tab into it.
• An animation that plays once for three seconds when the page loads and then stops.
• A live news feed with a "Pause updates" button.
• A loading spinner shown on its own, with no other content beside it to read.

These fail

• A looping hero animation with no pause control.
• A stock or news ticker that scrolls continuously with no way to stop it.
• An animated GIF that loops for more than five seconds with no control over it.
• A dashboard that refreshes its numbers every few seconds with no way to pause or slow it.
• A blink or marquee element, which have no controls at all.

A control that hides the moving content counts, as does one that stops it. A general "reduce motion" setting on the site counts too, if it is easy to find. Honouring the operating system’s reduce-motion preference is good practice, but the W3C treats it as not enough on its own, because the person has to know the setting exists and the page has to say so.

How to test it by hand

1. Load the page and watch it for ten seconds without touching anything. Note everything that moves, blinks, scrolls or changes by itself: videos, carousels, animations, GIFs, tickers, counters and feeds.
2. For each one, time it. Anything that stops on its own within five seconds is fine.
3. For each that runs longer, look for a control that pauses, stops or hides it, and try it. For updating content, a control that slows the updates also counts.
4. Check that the control is reachable from the keyboard and that it works.
5. For anything with no working control, ask whether the movement is essential to the activity. If it is only decorative or informative, it fails.

What automated testing can decide

What a machine can decide

blink and marquee elements are in the markup, have no controls, and fail outright. Automated testing can also find content that moves, loops or updates by itself for more than five seconds, from the page’s styles and from watching the page, and note whether a control sits beside it.

What it cannot

Seeing that something moves is not deciding that it has no control. A tool can find a button labelled "Pause" near a carousel, but whether it stops the motion needs trying, and whether a hidden control somewhere else on the page counts is a judgement. So is whether the movement is essential, which is a question about the activity rather than the pixels.

How Dreven handles it

Dreven finds the content on your pages that moves, blinks, scrolls or updates by itself and shows you each instance, with the page, a picture of it and any pause, stop or hide control found beside it.

A reviewer decides each result, including whether the movement is essential, and the report says how each one was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 2.2.1 Timing Adjustable (Level A). Time limits, including auto-advancing content, must be adjustable.
• 2.3.1 Three Flashes or Below Threshold (Level A). Nothing may flash more than three times a second.
• 1.4.2 Audio Control (Level A). Audio that starts by itself must be stoppable: the sound equivalent of this rule.
• 2.1.1 Keyboard (Level A). The pause, stop or hide control must itself work from the keyboard.

Questions people ask

All WCAG 2.2 criteria, in plain words