This document is in beta. Help us by reporting issues via Github or email.
When content moves (is animated, blinks or scrolls) automatically for more than five seconds, or when content automatically updates on the page, it must be possible for users to pause, stop or hide it.
On this page:
This ensures that people with cognitive disabilities that affect focus and concentration, are not distracted by movement.
2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)
- 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.
Note: For requirements related to flickering or flashing content, refer to Guideline 2.3.
Note: An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.
See the W3C’s detailed explanation of this guideline with techniques and examples.
<h2>Story headline</h2>
<div>Story content</div>
<div class="carousel__controls">
<button>Prior story</button>
<button>Pause</button>
<button>Next story</button>
</div>
...
A moving carousel of news stories that change every 5 seconds:
<h2>Story headline</h2>
<div>Story content</div>
This document is in beta. Help us by reporting issues via Github or email.