20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Should you use animated GIFs?



Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 16

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …