Basics:
Alternative Text Deep Dive
Part 1
Alt text really seems like it should be pretty straightforward, and in a million ways, I didn’t think this deep dive was really necessary until I turned my images off in my promotions tab in Gmail. Holy wow, things are BAD. If I only did reviews of alt text, I would likely keep myself busy all day every day, just on my inbox alone! So let’s start at the very beginning and slog through this seemingly boring (but supremely important) topic.
What is Alt Text?
Webaim.org defines alt text as “a textual substitute for non-text content”. Computers and screen readers cannot analyze an image and determine what the image depicts, so alt text provides a textual alternative for screen readers and other assistive technology to describe an image’s content.
Who uses alt text?
People that use assistive technology, largely people who use screen readers. It’s important to remember that a wide range of people use screen readers. In addition to those with low/no vision, persons with reading, attention, and cognitive issues may follow along with the content visually while a screen reader reads the content.
People that don’t have their email images load, whether that’s because of a personal setting, firewall, or low internet speed. In most email clients, users whose images do not load will be presented with the alt text of an image in place of the image itself.
Both of these groups of people are important and deserve good alt text, but in conversations in our industry, there seems to be a leaning more toward serving the few who opt not to view images. I’ve also seen alt text described as “just nice to have.” It always rings a little wonky to me, so I’ll just say very clearly that writing appropriate alt text is not a “nice to have” it is a “have to have”. We email marketers have a responsibility (both social and legal) to provide appropriate and equitable content to all users – especially users who cannot access the content – not because of a choice they made, but because of what their access needs are. It’s a huge difference and I believe that focusing on those with access needs allows us to more clearly set a goal for our alt text and therefore write it appropriately.
What happens without the alt attribute?
Oh man, this is a pretty awful experience. In the absence of a text alternative, the email client/screen reader does its best to provide additional information about the image. This can be pulled either from the image’s source URL or if the image is linked, the href URL. Depending on several different variables, the readout might be the entire image source URL, just the image filename, the entire href URL, or a simple “image”. Go ahead and open an email and view the image source and link URLs. These are not short and easy! They take forever to read out – and that’s just one image!
Here is an example from my inbox:
The href URL for this image:
http://go.paperculture.com/OTYxLUFSRS02MDUAAAGMo0ihGXNAxQxsJhbMCDSmws7zHjmVjNG_SYu35MWuHye3GDfpjaJXUY6OcCL6yyQHTp-ry4=The image source URL for this image:
https://pc-alc.imgix.net/alc/2023/06/27/17/50/49/78fe574f-56b9-4c2f8d80-e8b10ec8a719/230623_Summer-Memories_2.jpgSo for the love of all the good things in the world – please please please – add an alt attribute to every single image in your email. (Including the tracking pixel)
I’m saying it again – it’s a really big deal:
Use an alt attribute on every image in your email!
What exactly does this mean?
I’ve seen this done wrong, so before we get into what all can go into the value of your alt attribute in the next part, let’s just touch briefly on what actually including an alt attribute looks like. We want to use an empty alt attribute, also known as “null,” but please don’t put null in the alt attribute.
So that is:
✅ <img src="filename.jpg" alt="" />
✅ <img src="filename.jpg" alt />
❌ <img src="filename.jpg" alt="null" />
❌ <img src="filename.jpg" alt=" " />
So that’s no spaces and no null. You can use the alt without the ="", it works the same way. (I did finally test it along with a few other things for a future post)
All right, next up is Part 2, but I don’t even want you to think about going there until you’ve looked at all the emails you have on your docket and double-checked that all your images have an alt attribute. Once you have that alt attribute, we can talk about what to put into your alt attributes!