Question:
How do you write alt text for animated gifs?
If you want to ask me a question and have me answer it here, please go to this a11y.email questions google form. This is a no-judgment way to get your questions answered!
Answer:
So I’ll start with the easy part of that answer – you don’t need to identify it as an animation unless it is relevant to the image. An example of that would be if you had an animated gif of an old chronophotograph that is helping to explain how the images are compiled together to show a horse galloping.
Alt=”Animation of a horse made from several cards in a series of cabinet cards from 1887, an early example of stop motion animation.”
That’s not a very typical experience when we’re writing emails, so you can generally expect that informing the user that it’s an animated gif isn’t particularly helpful and falls into the category of “structural content the screen reader user doesn’t need” – like how it reads “Image” before/after an image’s alt text, or “Link” before/after the link text. Because this is already taken care of, we don’t have to worry about it. Likewise, you don’t have to describe the chronology of the slides (slide 1, slide 2 – or even first, last) – again unless that is relevant to the image itself.
So there is something specific to writing alt text for animated gifs – and that is – all of the slides in the gif. That might get you into some deep waters if your gifs have a lot of text in them as screen readers can stop reading alt text at about 120 characters. But hopefully your gif isn’t text-laden as that would be laborious for most folks to read anyways! The goal here is that you want to make sure that any content that is communicated in that animation is included in the alt text.
Animated gifs tend to be a good place to put text in a creative way, so we want to treat any text in any of the animated slides like we would any other image of text – that is to have the text that is in the animated gif in the alt attribute. If the image was informative in some way, you’d want to make sure the alt text is communicating the same information, etc. If the animated gif is linked, you would also need to make sure you’re also describing to the user where that link is taking them. (If you need a brush up on these image categories you can check them out in Part 3 of my Alt Text Deep Dive!)
Essentially – we treat an animated gif just like every other image when it comes to writing alt text, with the added caveat of making sure we are representing all of the content in the animation.
Here’s a few quick examples from Really Good Emails:
https://reallygoodemails.com/emails/now-arriving-lyft-scooters/live
This is an adorable animation of a lyft scooter zipping around, but it doesn’t really communicate anything, so it is a decorative image. It also isn’t linked, so it is not a functional image so you can stick with the decorative image’s null value (alt=””).
Which they did here so awesome work Lyft email team!!
https://reallygoodemails.com/emails/black-friday-weekend/live
This one has different text across various slides, so we need to convey that text in the alt attribute according to the Images of Text guideline.
alt=”Special Reveal: Black Friday Starts Now – Carhartt Work In Progress”
(I’m honestly not sure how to define the blinds thing, it feels like a weird private secret. I would expect that this is part of a larger campaign in which they’re letting some users in on the deal early – it would be great to pull in language from elsewhere in the campaign, but I’m not calling out the blinds specifically as that’s not really what they’re communicating. If this was a blinds store we’d say something different – so reveal works better here. I continue to not be a copywriter)
Because so much of the content in animated gifs are sequential, you’ll want to make sure you’re meeting that sequence when appropriate. But note that you’re still wanting to keep to a pretty small character count on that alt text so if you need to adjust your alt text so that the most important information is first – then please do so. An example would be if you have some sort of sequential build up to announce a new product and you list the features before the product to build up the suspense – you would be better off to announce that product first, then provide the additional content to top-load your alt text.
There is much (much!) more to consider about animated gifs to make them accessible outside of alt text. If you want more details about everything you need to think about with animated gifs, check out my post specifically about animated gifs.
We can also go ahead and ask ourselves: Should we even use gifs?
Note: If you care to check, the alt text that I used for these images is somewhat different than the alt text I suggested in this article. Why? Because the purpose of these animations in these examples is to help you understand the requirements of alt text on animated gifs in email – so I have adjusted my alt text to better describe them in this context. Remember – alt text is about content *and* context!!