Component:

Animated Gifs

Animated gifs are the darling of email marketing. There is quite literally no other way to add motion to an email that will display in nearly every single email client. Don’t believe me? Check out this caniemail.com overview on gifs. Unless you’re using an old/obsolete version of Outlook on a PC, you’re getting animated gifs. They even work on background images!

There are lots and lots of articles on including animated gifs in your email campaigns, so I won’t go too far into the how and why. As a developer, I’m going to explain some of the technical requirements before getting into the accessibility requirements, mostly because I still see some of these issues come across my desk and maybe if I include them in this article someone will read them. 😛

Requirements for Animated Gifs in Email:

  • Think Small – Both in file weight and physical dimensions. Your animation should ideally be under a few megabytes, and you’re best off focusing your animation in one small area. 
  • One Link – If you slice an animated gif into parts to link them to different places, that is not going to work. Each slice will automatically load and play on its own, so the sliced animations will not synch up correctly.
  • First Frame – For older versions of Outlook that don’t play animations, you’ll want to make sure that the first frame of your animation has all the critical information. You can set that frame as 0.1 seconds so it will not be visible on other email clients.
  • Color changes – Be aware that more colors in a gif will increase your file weight. Your best bet is to try to keep a fairly reduced color palette in the first place.

These are fairly expected requirements, if you’ve worked with an animated gif in email, you’ve likely come across these limitations before. 

Now, on to the main topic at hand, accessibility. What kinds of things do we need to think about when we’re making an animated gif for an email we want to be accessible? In addition to the above, you’ll also want to think about what kinds of disabilities are impacted by animated gifs.

Disabilities impacted by Animated Gifs in Email:

ADHD, dyslexia and other reading and attention disabilities – A lot of users have a real problem with overwhelming visuals, and animated gifs are a top culprit. For some users, it is impossible to read any text near an animated gif while it’s playing.

Photosensitive Epilepsy – Where exposure to flashing lights at certain intensities or to certain visual patterns can trigger seizures. This tends to be more frequent in children and adolescents, but is clearly a major issue to be aware of.

Low Vision and No Vision – Users that can’t see the content in the animated gif won’t be able to know what it says.

Color Blind – Users that have trouble distinguishing certain colors may not be able to see the content in the animated gif.

What makes an Animated Gif accessible?

All of these items must be met for your gif to be accessible:

  1. Alternative Text (WCAG SC 1.1.1)
    Your animated gif has to have good alt text. If your gif has text, that text needs to be represented in the alt attribute. If your gif is linked, that alt text also needs to tell the user where they are going if they select the link. Brush up on your alt text skills here.
  2. Color Contrast (WCAG SC 1.4.3)
    If the important content in your gif doesn’t meet color contrast requirements, users who are colorblind may not be able to see it. My favorite color contrast checker is here from WebAIM.
  3. Flashing (WCAG SC 2.3.1)
    The WCAG sets specific limits about flashes. These limits disallow more than three flashes in any one second period, or the flash is below the general flash and red flash thresholds. This can be a super deep dive and worth exploring if your gif includes any flashing. You can learn more about flashing and accessibility here.
  4. Limit Text (WCAG SC 1.4.5)
    By now you should know that using live text is the way to go in accessible emails, so any gif included in your email shouldn’t have text in it. There are some variations here depending on the level of conformance you are committed to. You can use text in the gif but represent it in the alt attribute for A level conformance. For AA conformance level you would not use text unless it’s a key component of the animation and also use appropriate alt text. You could also not use text at all in the animated gif for a AAA level.
  5. 5 Second Rule (WCAG SC 2.2.2)
    If we were creating a web page with an animation that auto-played we would want to follow the “Pause, Stop, Hide” criteria from the WCAG. This Success Criteria stipulates that any animation that automatically plays should have a mechanism to pause, stop or hide it. As email developers, we’re somewhat limited here. We don’t have many ways to control an animated gif, as that’s primarily in the control of the email client. And because of the User Agent Accessibility Guidelines (UAAG), most modern email clients *should* provide users with a way to control these animated gifs. (Usually, this is a setting adjustment or a simple click on the gif to get it to stop) Because they don’t always meet that criteria, we are left with what we can control – our gif settings. When you create your animated gif, you should ensure that no matter how many times it loops, the animation ends after 5 seconds. You can learn more about animated gif animation requirements here. 

Just for grins – go ahead and look up any article about using animated gifs in email marketing and see how many of them violate the above five points. It’s… a lot. A lot a lot. Okay, so that probably won’t make you smile, but you’ll definitely smile looking at these gorilla gif shirts.