2.2.2 Pause, Stop, Hide (A): 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.

Requirements

• Any content that scrolls, moves (like a carousel), blinks or updates automatically (like a news ticker) should stop after 5 seconds. Alternatively, users should easily be able to pause or hide the animated content.

Why is it important?

This ensures that people with cognitive disabilities that affect focus and concentration, are not distracted by movement.

Benefitted disability types

Many people find moving, blinking or scrolling content distracting.
People with cognitive impairments, particularly those with attention deficit disorders, may be particularly sensitive to moving, blinking or scrolling content.
Any content which moves or updates, can cause a problem for anyone who struggles to read text quickly, or finds it difficult to track moving objects.
Moving text can also cause problems for screen reader users, because the content can disappear, before the screen reader has had time to read it.

Summary

Do not show anything that automatically blinks, scrolls, animates or updates frequently if it lasts more than 5 seconds. Or give people a way to stop it. 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.

Common mistakes

• A carousel animates automatically every few seconds, and can’t be paused.
• A new ticker or feed updates automatically, and can’t be paused.

Design Guide

Pause, Stop, Hide Examples for Web

Example: A moving carousel of news stories that change every 5 seconds, with controls to over-ride this behaviour

<h2>Story headline</h2>
<div>Story content</div>
<div class="carousel__controls">
  <button>Prior story</button>
  <button>Pause</button>
  <button>Next story</button>
</div>
...   

Failure example:

A moving carousel of news stories that change every 5 seconds:

<h2>Story headline</h2>
<div>Story content</div>

References

1. The Animations tutorial by the W3C Web Accessibility Initiative explains how to add Play/Stop button, pause on mouse hover and keyboard focus and hide transitioning elements from assistive technologies
2. Accessibility Guidelines- Github.io