WCAG SC 2.2.2 Pause, Stop, Hide ensures that users can control moving, blinking, scrolling, or auto-updating information on a webpage. This is essential for users who may find such content distracting or overwhelming, such as those with cognitive or visual impairments. The success criterion indicates that users must be provided with mechanisms to pause, stop, or hide the moving content.
For any moving, blinking or scrolling 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.
In general, moving content can be used to attract attention or present updates, but it should not impair the user's ability to interact with the rest of the content. The goal is to provide users with control over such elements to prevent distraction or discomfort. Examples for blinking content are animations ads that are blinking on the side of the page to attract the user’s attention.
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.
Examples of moving content include image sliders, news tickers, and live stock carousels. The 5-second rule does not apply to auto-updating content, as this is essential for the purpose of the content. A pause button should be placed near auto-updating content. If the content is not live, it is recommended to resume from the same point where the slide or carousel stopped. For live content,such as news updates, it is advised to either resume at the most current point, even if it means skipping content missed during the pause, or resume at the same content with a message indicating that it may not be the most up-to-date, along with an additional button to jump to the most current content.
Mechanism such as a pause button or a hide button should not be provided if the object is moving, blinking, or scrolling for less than 5 seconds, or if it is not presented in parallel with other content on the page. For instance, if clicking on a link on the page takes us to another page, and a pre-load animation is played for 8 seconds because the content on the page is heavy to download, the pre-load animation is the only content on the page. Therefore, it passes this success criterion, even though it is presented for more than 5 seconds.
Blinking objects are allowed as long as they don’t last more than 5 seconds, have a mechanism to pause or hide them, and don’t blink more than 3 times per second. Blinking that occurs more than 3 times per second causes 'flashing,' which can trigger seizures, is not allowed on a web page.
Provide controls for moving content: Ensure that there are accessible controls to pause, stop, or hide moving, blinking, or scrolling content.
Prioritize static carousels and slides: Avoid using autoplay features, as they pose accessibility challenges. Screen reader users and individuals with cognitive disabilities may find it difficult to perceive autoplay content. Instead, implement static carousels with navigation arrows and ensure they are tested with screen readers to confirm their accessibility.
Implement time limits for moving content: If moving content that is presented in parallel with other content cannot be paused, stopped, or hidden, limit its duration to no more than five seconds.
Pause on Focus: If a carousel or slider includes a "pause on focus" feature, ensure that it is not the only mechanism provided. A dedicated pause button should also be available. Relying only on the "pause on focus" functionality will not meet this success criterion.
Example: Pausing an auto-scrolling news content.
A web page with a constantly moving carousel of images is playing automatically without any option to pause, stop, or hide the movement.
Explanation: Users with disabilities might find it difficult to focus on the moving content or other content on the page, leading to a poor user experience and potential accessibility barriers.
A web page features an automatically playing carousel of images with constant movement. This carousel includes a 'pause' button, which allows users to stop the autoplay. When the button is pressed again to resume playback, the carousel returns to the last point before the pause.
Scrolling text goes here...
More scrolling text...
Explanation: A web page features a news scroller that allows users to pause the scrolling content. This functionality gives users control over the moving content, enabling them to focus on other parts of the page without distraction.