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 learning 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 know what the gif is communicating.

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 don’t allow 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 really shouldn’t have text in it. There are some variations here depending on the level of conformance you are committed to, but the gist is: if you can say it with live text, that’s a better solution.
  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. 

    Note: It’s important to call out that gifs start playing as soon as they load which means that if you have an animated gif at the bottom of your email – it’s unlikely anyone will see it animate if it takes longer than 5 seconds for someone to scroll down there. No – that DOES NOT mean that you should delay the animation (that would violate this criteria), it DOES mean that your gif should be near the top of your email – above the fold – if you will.

Because folks tend to gloss over that last item, I’m going to go a little more in depth here: The 5 second rule is important, don’t ignore it. Look, I haven’t met a designer yet who hasn’t gotten frustrated by this limitation at some point or the other, but the endless looping of animated gifs is a major problem. WCAG 2.2.2 is one of the criteria that is required for non-interference, which we talked about in Part 1 of my interactive email series. Flashing is also included in this group so make sure you’re paying attention there too. These non-interference criteria directly block users from being able to access your content and can cause real harm to users that are impacted by them!! So this isn’t a small frivolous rule, it’s really important and one that really MUST be followed.

Hopefully you can now better implement animated gifs in your emails so they aren’t just fun ways to spice up your interaction rates – they’re also allowing all your users to take part in the fun without hurting anyone!

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.