Should you use animated GIFs?

In our Accessibility Checker plugin, we have a warning that flags if an animated GIF is inserted into a page. Many people don’t realize that animated GIFs can cause problems for people with disabilities or, in their typical use, can cause a website to fail certain Web Content Accessibility Guidelines (WCAG) criteria.

Thinking about putting GIFs on a website? Read on.

Problems Animated GIFs Can Cause

Animated GIFs can be particularly bad for people with epilepsy or other sensory sensitivities. They can cause seizures, headaches, or other negative effects if there is flashing or rapid changing of images in the GIF. In some cases, animated GIFs might cause nausea or dizziness, depending upon the type of imagery and transitions included in the GIF.

On the less severe side, animated GIFs can also be difficult for people with visual impairments to understand, especially if the GIF contains text or other information that changes rapidly. If your GIF doesn’t have detailed alternative text that describes it or the text in it, then someone who is blind or relies on a screen reader will miss out completely.

In certain situations, all users – even those who do not identify as disabled – may find animations distracting or detracting from the content on the website. If there are large GIFs on a page, it might make them slow down the page speed and create a poor user experience on mobile.

Relevant WCAG Success Criteria

We know that animated GIFs can cause accessibility problems, but is it possible to include them on a website and still pass WCAG?

Yes, you can use animated GIFs and still have a WCAG-compliant website, as long as you implement them thoughtfully. Here are the WCAG success criteria that are most relevant for ensuring the accessibility of animated GIFs:

1. Success Criterion 1.1.1 Non-text Content: Animated GIFs should have quality alternative text that describes the image’s content and what is happening in the animation.
2. Success Criterion 2.2.2 Pause, Stop, Hide: Animated GIFs that play for more than 5 seconds should have controls to pause, stop, or hide the animation. This allows users to stop the animation and avoid any negative effects if it’s bothering them.
3. Success Criterion 2.1.1 Keyboard: The pause or stop button for animated GIFs must be operable through a keyboard alone.
4. Success Criterion 2.3.1 Three Flashes or Below Threshold: Animated GIFs that flash or blink should not flash more than three times per second. This ensures that the animation does not cause seizures.

The short of this is: you can use animated GIFs and pass WCAG as long as…

• They have good alt text.
• There is a button to pause them.
• They don’t flash more than 3 times per second.

Pausing Animated GIFs

If you want to add an animated GIF to a website and make it “pausable,” you essentially do this by adding a JPG image of the GIF and replacing the GIF with it when the pause button is clicked.

Steve Faulkner has a CodePen that shows how to pause animated GIFs with HTML and CSS. We also have been playing around with a WordPress plugin that will pause GIFs which you can find on our GitHub.

You should ideally do this for everyone, but at a minimum should do this if users have prefers-reduced-motion set on their device.

Should I use animated GIFs?

As a general rule, we never put animated GIFs on websites. If an animation is needed, we’ll try to have clients use a video instead. Occasionally a client really wants a GIF, so that’s where the pause technique comes in.

Don’t use GIFs in emails because they can’t be paused.

Animated GIFs are OK on social media because all the major platforms have already implemented the ability for GIFs to be paused (and, in some cases, pause them by default).

Additional Resources

• Image Animated GIF Warning Documentation
• Your Website Makes Me Want To Puke podcast episode