Accessible images: animation guidelines

  • All images, including animated images, must have alternative text (see Images: Alternative Text).
  • Any animation that starts automatically and moves for more than 5 seconds must provide a way for the user to pause, stop, or hide the animation.
     

For everyone

Alternative text for animated images

When you upload an animated image, provide an alternative text description as you would for other images.

Animation must be less than 5 seconds or pausable

Do not include auto-playing animations or other motion that cannot be paused in course material or Canvas pages, on websites or applications, or in publically available communications.

An image that starts automatically and moves for more than 5 seconds must provide a way for the user to pause, stop, or hide the animation. This applies to element transitions, animated gifs, parallax scrolling, and code-based moving elements such as data visualizations and animated features.

Why avoid animation?

Automatic movement can trigger vertigo, headaches, and nausea in people with vestibular disorders and seizures in people with conditions like photosensitive epilepsy. In addition, auto-motion is distracting to some people with learning and cognitive disorders.

However, sometimes no other method will achieve the desired effect, and animation is necessary. In these cases, ensure that your animations comply with WCAG 2.1 guidelines, as indicated below.

ASU Web Standards

In addition to WCAG 2.1, ASU has additional university standards for animation. Even if your site is not a college or unit site, we recommend you take a look at these standards as they are detailed and well-researched.

 

For developers

Alternative text for animated images

When you upload an animated image, provide an alternative text description as you would for other images.

These avocados will dance three times. To play animation again, refresh this page.

HTML

<img alt="These avocados will dance three times. To play animation again, refresh this page." src="/images/giphy.gif" />

Provide a way to play, pause or limit animations

For animated gifs, do ONE of the following:

  1. Provide a play button: Javascript such as the Giffer script will provide a play button on animated gifs, allowing for greater user control over the interface.



  2. Provide a pause button: The ASU Webspark Drupal installation provides a pause button on the video hero. Here is an example you can examine and copy.

  3. Play (loop) the animation for less than 5 secs: You will need to modify the number of times an animation loops. You can change the number of loops using an online tool like ezgif.com or desktop graphics software like Photoshop:
    1. Open the animated gif in Photoshop.
    2. Go to Window > Timeline (if the Timeline panel is not already open).
    3. At the bottom of the Timeline panel, you will see an option that says "Forever." Change that to "Once" (or choose "Other" and change it to "2," depending on the length of the animation).
      Timeline panel in Photoshop, showing the loop time options
    4. Go to File > Export > Export for Web and save it as a gif.

How to test

Manually inspect any pages with animated elements. If they automatically play, they must either (a) provide a pause button or (b) automatically stop after 5 seconds. The best user experience is to not automatically play animations, but to give the user a play button and, thus, as much control over the user interface as possible.

Relevant W3C WAI documents

  • WCAG 2.1 Guideline 2.2.2 Pause, Stop, Hide: 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...
  • How to Meet WCAG 2.1 Guideline 2.2.2
Was this helpful?

 
 

Slack

Accessibility Connections