Published on Web Accessibility (https://www.uoguelph.ca/accessibility/web)

Home > What to Fix > Animated Content

Animated Content

Problem

Animated content that continually moves, blinks, scrolls or updates automatically can be distracting to users. It can pose a barrier for people who have trouble reading quickly or anyone who has trouble tracking moving objects. In addition, any visual content that flashes more than three times in a second could possibly trigger a seizure. 

How to Fix

  • Provide a keyboard accessible [1] mechanism for users to pause, stop or hide animated content.
  • Ensure that after content has been paused or stopped, it can be restarted again from the point where it was stopped.
  • Ensure that the mechanism can be easily perceived [2].

What to Fix

Moving, Blinking, and Scrolling Content

Moving, blinking and scrolling content is any visible content that conveys a sense of motion. It starts automatically, lasts more than five seconds, and is presented in parallel with other content. Examples include: Slideshows, animation, online games, and any content which automatically scrolls.

Auto-Updating Information

Auto-updating information is any content that updates or disappears based on a preset time interval. It starts automatically and is presented in parallel with other content. Examples include: audio, weather, news, stock price updates, and automatic presentations or messages.

Exceptions

The only exception is if the moving, blinking, scrolling, or auto-updating content is part of an activity where it is essential, and if removed, would fundamentally change the information or functionality of the content; and the information and functionality cannot be achieved in another way that would conform.

Things to Avoid

  • Remove any web content that flashes more than three times in any one second period.
  • <blink>Do not use the blink element.</blink>

External Resources

  1. Understanding Success Criterion 2.2.1 Timing Adjustable (Level A) [3]
  2. Understanding Success Criterion 2.2.2 Pause, Stop, Hide (Level A) [4]
  3. Understanding Success Criterion 2.3.1 Three Flashes or Below Threshold (Level A) [5]

Source URL: https://www.uoguelph.ca/accessibility/web/what-fix/animated-content

Links
[1] https://www.uoguelph.ca/accessibility/web/what-fix/keyboard-accessibility
[2] https://www.uoguelph.ca/accessibility/web/what-fix/colour-contrast
[3] http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html
[4] http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html
[5] http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html