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
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.
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
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
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.
A code fix you can copy
Surface a real pause control, and stop rotation when any item gets focus or hover.
The problem
<div class="hero-slider auto-rotate-3s">...</div>The fix
<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.
Other Operable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.