WCAG 2.2.2 Pause, Stop, Hide for Autoplay and Motion

The homepage that will not sit still

A hero video loops behind the headline. A carousel slides every four seconds. A ticker scrolls prices along the bottom. For many visitors that is lively design. For a person with attention difficulties it is a wall of distraction. For someone with low vision, a slide that moves on before they finish reading is lost. For a screen reader user, a live feed that keeps announcing updates can make the rest of the page unusable.

What WCAG 2.2.2 asks of moving and updating content

The rule has two parts.

• Moving, blinking or scrolling content needs a way to pause, stop or hide it when all three conditions are true: it starts by itself, it lasts more than five seconds, and it sits alongside other content.
• Auto-updating content, such as a live news feed or a stock price, needs a way to pause, stop or hide it, or to control how often it updates, when it starts by itself and sits alongside other content. There is no five second allowance for this part.

The exception is motion that is essential to the activity, where removing it would change the meaning. A loading animation can count as essential when nobody can interact during that phase and a still screen would look frozen.

Autoplay, sound and user-initiated playback

People often search for what WCAG and the ADA say about autoplay with sound. Neither bans autoplay outright. WCAG sets two limits, and good UX practice goes further.

Sound is covered by 1.4.2 (Level A). If audio plays automatically for more than three seconds, the page must offer a way to pause or stop it, or a volume control that works separately from the device volume. The reason is simple: a screen reader user hears the page through speech, and background audio talks over it. Finding the off switch by ear while music plays is very hard. W3C details the rule in Understanding Audio Control.

Motion is covered by 2.2.2. A muted autoplay video still moves, so it needs a pause control if it runs past five seconds.

The ADA has no technical rule about autoplay. US judges and federal regulators generally measure websites against WCAG, so meeting 1.4.2 and 2.2.2 is the practical target; our ADA website compliance page explains how that works. This is not legal advice.

Who is hurt by motion they cannot stop

• People with ADHD, autism or other attention differences find it hard to focus on text while something moves beside it.
• People with low vision or reading difficulties need more time than an auto-advancing slide gives them.
• Screen reader users lose their place when live regions keep interrupting, and cannot hear speech over sound.
• People with vestibular disorders may feel dizzy or sick from large background motion.
• Older users often read more slowly and are caught out by content that changes under the cursor.

Background video: failing and passing code

<video src="hero.mp4" autoplay muted loop playsinline></video>

<video src="hero.mp4" muted loop playsinline controls
  poster="hero.jpg"></video>

If design requires autoplay, add a visible button labelled Pause background video next to it and make it work from the keyboard. As an extra, honour the reduced motion setting in CSS:

@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
  .hero-video { display: none; }
}

The media query helps people who have set that preference, but auditors still expect a control on the page, because many people never change the setting.

Carousel, ticker and feed failures

Testing for 2.2.2 wcag issues

You need a stopwatch, a keyboard and ideally a screen reader. Run this on the home page and any page with media or live data.

1. Load the page and wait. Open the page fresh, keep your hands off the controls and time anything that moves, blinks, scrolls or updates by itself.
2. Apply the five second test. Note every moving item that runs longer than five seconds beside other content, and every feed or counter that updates without being asked.
3. Look for a control. Check that each one has a visible pause, stop or hide button, or a setting that turns it off, close to the moving item.
4. Use it from the keyboard. Tab to the control, press Enter or Space and confirm the motion really stops and stays stopped.
5. Listen for sound. If audio starts by itself and lasts over three seconds, confirm there is a pause, stop or separate volume control near the top of the page.
6. Check with a screen reader. Make sure automatic sound or frequent live updates do not drown out the screen reader voice.

Nearby rules on time, motion and flashing

1.4.2 handles audio, as described above. 2.2.1 Timing adjustable covers time limits on tasks, not motion. 2.3.1 sets the three flashes limit for flashing content, a safety rule for people with photosensitive seizures. 2.3.3 (AAA) asks that motion triggered by interaction can be turned off. Status updates that need to be announced fall under status messages.

The official explanation is in Understanding Pause, Stop, Hide. Every other rule sits in our checklist, and for keyboard behaviour of your controls see keyboard access.