Loading...
Loading content...
Loading content...
Users must be able to pause, stop, or hide moving or auto-updating content.
Why it matters: Moving content can be distracting or cause nausea for some users.
For moving, blinking, scrolling, or auto-updating information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and for any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
What This Means: This success criterion requires that moving, blinking, scrolling, or auto-updating content that starts automatically and lasts more than 5 seconds must have controls to pause, stop, or hide it. This applies to carousels, news tickers, auto-updating feeds, animated banners, and similar content. The controls must be easy to find and use.
Why It's Important: Moving or blinking content can be distracting, especially for users with attention disorders or cognitive disabilities. It can also cause motion sickness or vestibular disorders for some users. Auto-updating content can be disruptive and make it difficult to read or interact with other content. By providing controls, users can manage their experience according to their needs.
Add pause/play buttons to carousels and sliders. Provide stop controls for auto-updating content like news tickers or live feeds. Ensure controls are clearly visible and keyboard accessible. Content that lasts 5 seconds or less, or that is essential to the activity, is exempt from this requirement.
This criterion ensures that users with attention disorders can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with vestibular disorders can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A carousel auto-rotates with no pause button, causing distraction and potential motion sickness.
<div class="carousel" data-autoplay="true"></div>A carousel has pause/play buttons allowing users to stop the animation.
<div class="carousel"><button aria-label="Pause carousel">⏸</button></div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.2.2 Pause, Stop, Hide are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If content moves slowly, it doesn't need pause controls.
Even slow-moving content can be distracting or cause motion sickness. All moving content must have pause/stop controls, regardless of speed.
Auto-updating content like live feeds is essential, so it can't be paused.
Even essential auto-updating content must have pause controls. Users can choose to pause it if it causes issues, then resume when ready.
Carousels or sliders that auto-rotate without pause controls.
Add pause/play buttons to carousels. Ensure controls are keyboard accessible and clearly labeled.
Scrolling news tickers or marquees without stop controls.
Add pause/stop buttons. Consider using static content instead of scrolling when possible.
Auto-updating content (live feeds, stock prices) without pause controls.
Add pause/refresh controls. Allow users to control when content updates.
Animated GIFs or CSS animations that cannot be stopped.
Provide controls to pause animations, or respect prefers-reduced-motion. Consider using static images with play buttons instead.
Note: These are official W3C resources for 2.2.2. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.2.2 Pause, Stop, Hide correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.2 Enough Time