WCAG 2.2 - Success Criterion
2.2.2 Pause, Stop, Hide
Description
For any moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and is presented alongside other content, users must be provided a mechanism to pause, stop, or hide it. Similarly, for any content that auto-updates, users must be able to pause, stop, hide, or control the frequency of updates. This criterion protects users who are distracted or disoriented by motion, and users who need extra time to read static content.
How To Test
- Load the page and observe whether any content moves, blinks, scrolls, or auto-updates on its own.
- Measure approximately how long the motion lasts - if it exceeds five seconds and runs alongside other content, a control is required.
- Look for a Pause, Stop, or Hide button near the animated content and verify it is keyboard accessible (Tab to it and press Enter or Space).
- Activate the pause control and confirm the animation actually stops or freezes.
- If a Stop control is present, confirm it permanently halts the animation (unlike Pause, which is temporary).
- For auto-updating content (news feeds, live scores), check whether a control allows the user to pause updates or change the update frequency.
- Verify that hiding or stopping the content does not remove other essential information from the page.
Testing Tools
- axe DevTools — Scan for animations that auto-play or continue without user control.
- NVDA — Test announcements for pause/stop/hide controls using keyboard navigation.
- Lighthouse — Accessibility audit to flag animation and motion control issues.
Demo
Moving content plays continuously. Users cannot pause it - disorienting for users with attention or cognitive disabilities, and interferes with screen readers.
A Pause / Resume button gives users control over moving content. The announcement is also available as static text.
Code
News ticker scrolls continuously with no pause control. Users cannot read headlines at their own pace, and the constant motion is disorienting.
Pause button and frequency controls let users read headlines at their own pace. The ticker respects their need for time to process information.
Code
Fail Explanation
A failure occurs when animated banners, carousels, scrolling tickers, auto-playing video, or live-updating feeds start without user initiation and run indefinitely with no pause, stop, or hide control available. Users with attention deficit disorders, cognitive disabilities, or vestibular disorders may be unable to focus on or read any other content on the page while the animation is active. Screen reader users may also find that auto-updating regions interrupt or conflict with their reading flow.
Pass Explanation
A passing implementation provides a clearly labeled, keyboard-accessible Pause or Stop button adjacent to the animated content. Alternatively, the animation may be set not to start automatically, or the content may be designed to stop within five seconds. Auto-updating live regions (such as a news ticker or score feed) must offer a control to pause updates or allow the user to choose a slower refresh interval.
Notes
This criterion does not apply to animations that are essential to the content - for example, a progress indicator that must move to convey status, or an animation that is the only means of conveying information. Prefers-reduced-motion CSS support is a good complementary technique but does not on its own satisfy this criterion.
Techniques
WCAG techniques used in this demo: SCR33, G4
Suggested Solutions & References
Curated from 11 real-world audit findings and official WCAG guidance.