accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Visual distractions

On this page:


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.


Requirements

Common mistakes

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)

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

<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


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email