Pause, Stop, Hide
Success Criterion 2.2.2 (Level A)
Question
Can moving, blinking, scrolling or auto-updating content be paused, stopped or hidden by the user?
Why is this important
Some people, including those with reading, learning, and cognitive disabilities, can become easily distracted by moving or blinking content. It may make it difficult or even impossible for them to interact with the rest of the Web page. This is especially true when moving content is presented alongside static text. In order to properly focus on the important text, users should be able to pause, stop, or hide the moving portion of the content.
Whom does it benefit?
Example 1:
As a student with an attention deficit disorder,
I want information presented without unnecessary distractions,
So that I can concentrate and focus on the assignment at hand.
Example 2:
As a person with a reading disability,
I want to be able to hide or stop moving content,
so that I can stay focused on the words in the text I am currently reading, not the content
blinking or moving around the page.
What should you do?
For moving, blinking, or scrolling content that starts automatically, lasts more than five seconds, and is presented alongside other content, provide controls that allow the user to pause, stop, or hide the movement, blinking or scrolling.
Auto-updating content must have the same options; or an option to control frequency.
When using a mechanism that auto-pauses moving content (e.g., hovering over a carousel to stop the movement), provide the user with a means to pause that does not tie up the user or the focus so that the page cannot be used.
How do you do it?
- When possible, do not start an animation or other moving content on page load, if the movement lasts for more than five seconds.
- When using animation, moving, or blinking content, provide controls that allow the user to pause, stop, or hide the content.
- Provide meaningful labels for user controls. (See Success Success Criterion 4.1.2 for more detail).
- Allow the user to resume play from the point it was paused.
If the above methods are not possible, then provide a link, button, or other mechanism that reloads the page without any moving, blinking, or scrolling content.
Need technical guidance?
Additional Resources to help you:
- 2.2.2 – Pause, Stop, Hide - Wuhcag
- Animations - W3C Tutorials