Understanding Success Criterion 2.2.2 Pause, Stop, Hide

The purpose of this success criteria is to prevent users from getting distracted while they are interacting with a Web page.

Official Requirements

Success Criterion 2.2.2 Pause, Stop, Hide (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.

Note – 

1. For requirements related to flickering or flashing content, refer to Guideline 2.3.

2. Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

3. Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.

4. 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.

Why is it required?

Moving, Blinking or Scrolling content can be a huge distraction to a large number of people. Persons having cognitive impairments, especially the ones with Attention Deficit Disorders, would usually be sensitive to moving, blinking or scrolling content. Content that moves or updates itself automatically is a hurdle to those who have trouble reading stationary textual information quickly. It also applies to those who find it hard to place/track moving objects and the people who use screen readers. For people who use screen readers this is a matter of great concern because the content can disappear before the screen reader has had time to read it.

How do we fix it?

• Provide users an option to pause and restart animation
• Provide users an option to pause and restart auto-updating information
• Design the animation in such a way that the motion stops on its own after 5 seconds
• A “loading” animation can be considered essential if it doesn’t run in parallel with other content–ie, it’s the only content on the page, and is used to convey to the user that they need to wait until the content is fully loaded

Mistakes to avoid

• If the content moves for more than five seconds but there is no option available for users to pause, stop or hide it

Reference

Understanding Success Criterion 2.2.2