WCAG (Level A) SC 2.2.2 Pause, Stop, Hide (W3.org)
Issue description
WCAG 2.2.2, “Pause, Stop, Hide” focuses on giving users control over moving, blinking, scrolling, or auto-updating information that starts automatically and lasts more than five seconds, which includes, but is not limited to: video content, animations, and image carousels. This criteria essential for people with various disabilities, as such content can pose significant challenges:
- Vestibular disorders: Moving, blinking, or scrolling content can trigger dizziness, nausea, and headaches for people with vestibular disorders.
- Seizure disorders: Flashing content can trigger seizures in people with photosensitive epilepsy.
- Cognitive disabilities: Auto-updating information or moving content can be distracting and overwhelming for people with cognitive disabilities, making it difficult to focus and process information.
- Visual impairments: Rapidly changing content can be difficult to track and comprehend for people with low vision.
Many websites include content that
- Auto-plays: Videos or animations that start playing automatically.
- Scrolls or blinks: Text or images that scroll or blink continuously.
- Updates automatically: Content that updates dynamically without user interaction. When users cannot control this type of content, it can create a disorienting, distracting, and even dangerous experience.
WCAG requirements
This guideline requires that for any moving, blinking, scrolling, or auto-updating information that lasts more than five seconds, users must be able to:
- Pause it: Stop the movement or update.
- Stop it: Stop the movement or update and prevent it from starting again.
- Hide it: Completely hide the content.
Exceptions
- User-controlled: Content that is user-controlled (e.g., a video player with controls) is exempt.
- Essential: Content that is essential and cannot be paused, stopped, or hidden (e.g., a real-time stock ticker) is exempt.
Essentially, this guideline ensures that users have control over their visual experience and can avoid distractions or discomfort caused by moving, blinking, or auto-updating content. It promotes inclusivity and provides a more comfortable and accessible online experience for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.2.2, “Pause, Stop, Hide” involves giving users control over any moving, blinking, scrolling, or auto-updating content that lasts for more than 5 seconds. Here’s how:
Provide controls
- Clear and accessible controls: Offer users a way to pause, stop, and hide the content. These controls should be easy to find and use, regardless of the user’s input method (mouse, keyboard, touch).
- Visible controls: Make the controls clearly visible, either within the content itself or near it.
Keyboard accessible
- Ensure the controls can be operated using the keyboard alone.
Limit duration or movement
- Shorten duration: If possible, shorten the duration of the moving, blinking, or auto-updating content to 5 seconds or less. This eliminates the need for explicit controls.
- Reduce movement: Minimize the amount of movement or blinking to reduce potential distractions or discomfort.
User-initiated content
- Start on demand: Configure the content to start only when initiated by the user, such as when they click a button or interact with a specific element.
Consider user preferences
- Remember preferences: Store the user’s preferences (e.g., paused, hidden) so they don’t have to adjust the settings each time they visit the page.
Testing
- Keyboard testing: Test the controls using only the keyboard to ensure they are accessible.
- Assistive technology testing: Test with screen readers to ensure the controls are identified and usable.
Examples
- Autoplaying video: Provide a pause/play button and a separate mute button for the video.
- Scrolling news ticker: Include controls to pause, stop, and hide the ticker.
- Animated slideshow: Provide controls to pause the slideshow and manually advance slides.
- Auto-refreshing data: Offer a control to disable automatic updates or allow users to set the refresh interval.
By implementing these techniques, you give users control over their visual experience, prevent distractions and discomfort, and make your website more accessible to everyone.
