Our series on accessible email continues. In my last post, I explored ways to create subject lines that are more user-friendly to people who are blind or low vision. In this post, I’ll describe ways to make images in email accessible.
As a screen reader user for nearly 20 years and a communications specialist with Knowbility, there’s a thing or two I’ve learned about web accessibility. And though I focus on email here, much of what I discuss can also be applied to your social media posts and direct messages.
Captions for images in email messages
Among the most pervasive barriers that I encounter online are images with missing or unhelpful alt text. The alt attribute in HTML allows people to include a description of any image being shown on a webpage. Most newsletter platforms and email programs including Outlook allow for this function, too.
Your description doesn’t need to be long. Fifteen to thirty words are enough. The aim is for your reader to know what’s on the screen.
For example, for the image below, “Box of chocolates” is specific enough, conveying the main subject of the image. “A turquoise box of chocolates with red ribbon on a white table” is even better.
Photo by Food Photographer - Jennifer Pallian on Unsplash
Image attachments
If you’re attaching the image to the email rather than including in the body, don’t worry about alt text. Instead, use a logical name for the image file. “Box of chocolates” is a better filename than “img_5477.” Change the filename before you add it to your email.
Images and email clients
This article from Microsoft offers a how-to guide for adding alt text to your images within Outlook. If you’re using another platform, you might be able to enter alt text by manually editing the HTML in your email. First, if your email program allows, enable the HTML editor in your email or newsletter client. After the URL to each image, add the alt attribute followed by the equals sign and the alternative text in quotations.
For Example:
<img src="logo001.jpg" alt="Knowbility logo">
Without the alt text, a screen reader would simply read “logo001,” but with the alt text, it would read “Knowbility logo.” I’ve encountered instances where the word “logo” is omitted. I favor more detailed alternative text and so like the use of “logo.” It gives the impression that the sender is detail-oriented. If you cannot edit the HTML in your email, simply write a short description following each image.
Images of text
Before I leave this topic, I want to address the growing use of text inside of pictures. Though there is software now that can identify what’s in an image (Facebook’s AI comes to mind), it still is lacking, and it cannot describe most images of text I’ve come across on my news feed. “Image may contain text” is a phrase I’m hearing more and more from my screen reader.
Though some screen readers now come with built-in OCR software that can convert image text into editable text quite well, I advise against relying on this as a way to avoid adding alt text. For a wide range of reasons, some people do not run the latest version of their screen reader.
Takeaways
Alt text does not need to be long or overly descriptive. The goal is for your reader to know what’s on the screen. If your email program limits the length of alt text—or the addition of it altogether—then you can write the text in the body of your message.
Thanks to Becky Gibson, accessibility strategist with Knowbility, for help with this post. For a more in-depth discussion on alt text, read this introduction: An Alt Text Primer by our Nic Steenhout.
If you have questions, comments, or want to add your perspective, please let us know via email or on Twitter @knowbility. And, if you need help with all the other tasks related to accessible design, development, and leadership support, we’re here for you.
