Summary

Ensure that animated graphics do not pose a seizure risk and users can disable them.

Note

This page only addresses the unique issues caused by animated graphic formats. These graphics also require alternative text and extended descriptions, as appropriate, to meet WCAG requirements.

Techniques

Examples

Example — Replaceable graphic

A button is provided to replace the animated GIF with a static alternative using JavaScript.

<img id="rocket"
    src="rocket-launch.gif"
    alt="Rocket blasting off" />
<button
   onclick="replaceImage('rocket', 'static-rocket-launch.jpg')"
   >Stop animation</button>

Explanation

Although animated graphics such as animated GIFs are not commonly used in publications, their use presents unique challenges for accessibility beyond the basics of describing them. They are more like very short video clips, so you also need to consider some of the same issues that affect videos.

A primary concern is that the image does not present a risk of seizures. Since the images are animated, any flashing must not occur more than three times per second. If the animation is less than a second, and the animation plays in an endless loop, you must calculate the flashes per second by multiplying the number of flashes in the animation by the number of times the animation loops in a second.

If the animation ends automatically after five seconds, it meets WCAGs requirement that users be able to stop the playback of moving content. Due to the pagination of digital publications, users will typically not reach the image before the animation completes. A workaround to this problem is to include a control, typically a button, that replaces the animated graphics in a document with unanimated equivalents. The user can then decide whether they want the animations to play or not.

Note

Although animations created using the canvas element present the same issues with flashing and the need for users to turn off, they also pose additional issues not covered in this section. A future update to the knowledge base will cover animated canvases.

Related Links