WCAG 2.1 · Level A · Operable

WCAG 2.2.2 — Pause, Stop, Hide, explained with examples

Any auto-starting moving, blinking, or scrolling content lasting longer than 5 seconds must be pausable, stoppable, or hideable. Auto-rotating carousels distract users with cognitive disabilities and break screen readers attempting to read sliding content.

Number
2.2.2
Level
A
Principle
Operable
Guideline
2.2 Enough Time
01 / 05

Why this criterion exists

Auto-rotating carousels distract users with cognitive disabilities and break screen readers attempting to read sliding content.

If you only remember one thing: any auto-starting moving, blinking, or scrolling content lasting longer than 5 seconds must be pausable, stoppable, or hideable. Everything else on this page is detail.

02 / 05

Who feels it when this fails

Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Pause, Stop, Hide affects:

  • Cognitive accessibility
  • Screen reader users
  • Users with vestibular disorders
03 / 05

How sites typically fail it

These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.

  • Hero sliders auto-advancing every 3 seconds with no pause control
04 / 05

How to test for it

  • Verify every auto-moving region has a pause, stop, or hide control.

Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.

05 / 05

A code fix you can copy

Surface a real pause control, and stop rotation when any item gets focus or hover.

The problem

HTML
<div class="hero-slider auto-rotate-3s">...</div>

The fix

HTML
<div class="hero-slider" aria-roledescription="carousel">
  <button aria-label="Pause auto-rotation" onclick="pause()">⏸</button>
  ...
</div>

Surface a real pause control, and stop rotation when any item gets focus or hover.

Frequently asked questions

Do hero sliders need a pause button even if they are slow?

Yes, if they auto-advance and run for longer than 5 seconds in total. The 5-second threshold is for individual pieces of content (one slide), not the entire carousel. A carousel that rotates every 8 seconds still auto-advances and still needs a pause/stop control. Auto-rotation that stops when any slide gains keyboard focus is one acceptable implementation.

Do CSS animations and transitions need pause controls?

Only if they auto-start, last longer than 5 seconds, and run in parallel with other content in a way that distracts. A one-time transition animation (e.g., a page fade in) is exempt. A looping marquee text or continuously rotating badge needs a pause control. The prefers-reduced-motion media query is a separate (and complementary) mechanism targeting vestibular disorder users.

Find every accessibility issue on your site in 60 seconds.

Free public scan. No card. AI-generated fixes for every issue we find.