2.2.2 Pause, Stop, Hide

What does it mean?

Carousels, scrolling tickers, animated banners and background videos draw the eye and make it hard to concentrate on the rest of the page. If such content starts automatically, runs for more than five seconds and is shown alongside other content, users need a way to pause, stop or hide it.

The same applies to content that updates automatically, such as live tickers or feeds: users must be able to pause, stop or hide it, or control how often it updates. Exceptions are movement that is essential to the activity, and short animations such as a loading indicator that ends within five seconds.

Who does it help?

• People with attention deficit or cognitive disabilities who are distracted by movement
• People with low vision or reading difficulties who cannot read moving text
• Screen reader users, whose reading position can jump when content changes
• People with vestibular disorders for whom motion can cause discomfort

Common failures

• An auto-rotating hero carousel with no pause button
• A news ticker that scrolls continuously and cannot be stopped
• A looping background video or animated GIF with no control
• A live feed that refreshes and reorders content every few seconds without a way to pause

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Moving, blinking or auto-updating content (carousels, tickers, animations) can be paused or stopped.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<div class="carousel" data-autoplay="4000">…</div>

<section class="carousel" aria-label="Offers">
  <button type="button" class="carousel-pause" aria-pressed="false">Pause slideshow</button>
  …
</section>

<script type="module">
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) startAutoplay(); // pause button calls stopAutoplay()
</script>

A visible pause button stops the rotation; users who ask the system for reduced motion get no autoplay at all.

Practical tips

• Place the pause control before the moving content in the reading order, so keyboard users reach it first.
• Best practice: do not autoplay at all; let users start carousels and videos themselves.

Guides and patterns on this

• CarouselPause button, previous/next, slide labels, no forced autoplay.

Official source

Understanding WCAG 2.2 at the W3C: 2.2.2 Pause, Stop, Hide