Level A
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
- Moving, blinking, scrolling: 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; and
- Auto-updating: 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.>
Explanation
If there is moving content like an automatic carousel, animated gif, scrolling text or parallex background, and it lasts for more than five seconds, there must be a way for people to stop it. This means that anyone who is distracted or made nauseous by constantly moving content can still consume the content without difficulty.
Responsibilities
- Design
- Development
- QA
Requirements
- Content does not move or update for longer than five seconds;
- For content that moves or updates for longer than five seconds, a button is provided to stop it;
- For content animated with CSS, the prefers-reduced-motion property is used.
Common mistakes
- A piece of content like a sports score is regularly updated, but there is no mechanism to stop the updates;
- A carousel auto-updates, but has no buttons to let users pause/stop it;
- An animated gif is on constant loop and there is no mechanism to pause/stop it.