Basics:

Alternative Text Deep Dive

Part 4

This is the final part of our four-part series on alt text. Raise your hand if you thought alt text was way easier before you read this. If you’re new here, you probably want to start at the beginning of Part 1.

It is extremely rare for an email to reach my inbox without a linked image, and that is why I saved this super heavy talk for last. Nearly every email has a functional image, that means every email marketer needs to familiarize themselves with this concept!

Functional Images (linked image!)

If you can remember, way back in part 1 we talked specifically about what happens without an alt attribute and why it’s so important to have them. Functional images take it up a notch, if you have no alt attribute OR if you have an empty alt attribute (alt or alt="") the screen reader will read out the entire URL from the href. So what was an acceptable solution (empty alt) is now a huge problem when the image is linked. Remember that these links usually have a lot of tracking details encoded in there, making the links super long and painful for screen readers to read. So that means *every single linked image* must have text in that alt attribute. It’s a *must*.

The text alternative of an image wrapped in a link should describe where that link is going. All images with a link MUST have alt text that helps the user understand where the link takes them. So that means that an otherwise informative image that is linked now must meet the criteria for the informative image and functional image. This can get messy in email, and we will discuss this in further posts. 

Examples:

alt="Sweet green figs with a raspberry red center on a cutting board spread, shop figs now."

Once a decorative image becomes linked, the functional image requirements change the alt text pretty dramatically. Because the user hasn’t been able to read the fig details yet, it makes sense to give additional content here to help support the shop now CTA.

alt="With Sonos brand speakers, you can control what your speakers play and where from our phone app. Learn more about our speaker systems now."

Not as much changes with an informational image when it becomes linked, but additional details about where the link is taking the user becomes critical.

alt="Gemini - Cooper glasses in Seaweed Crystal with Riesling > Adaptable, witty, analytical. Shop the look."

Again, little changes with this image-as-text image except for the additional details about the link’s end point.

alt="Sproos!, home page"

alt="Check out our red shower gear!"

alt="Red is back! Shop our full line of red products."

Yeesh – this is definitely more wordy, but we are meeting our requirements as best we can in the scenario. I would advocate as best I could for reducing these links as much as possible.

And here we are at the end of our 4 part Alt Text Deep Dive. In future posts, I plan on going into specific email alt text issues, digging into functional images, and discussing how email’s “link all the things!” stance on linking can impact accessibility. For now, I hope you have a broader understanding of how to write better alt text and why it’s so important.

Note: A lot of the content here is loosely taken from the WebAIM’s Alt text Tutorial – along with my input and experience working with clients that focus on accessible emails and spending probably too much time thinking about this.

Embarrassing Note: Try as I might, I am definitely not a copywriter and my alt text reflects that. I would be grateful forever if you had better text suggestions as long as they still meet the requirements stated above.