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

Back to the overview page

Visual distractions

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:


Common mistakes


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>Next story</button>

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



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