2.2.2 - Visual distractions

Summary

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.

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.

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.

Why?

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

Official wording in the Web Content Accessibility Guidelines

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.

Guidance 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>

More guidance for Web

• The Animations tutorial by the W3C Web Accessibility Initiative explains how to:
  • Add Play/Stop button
  • Pause on mouse hover and keyboard focus
  • Hide transitioning elements from assistive technologies