Basics:
Alternative Text Deep Dive
Part 2
All right, in the first part of our Alt Text Deep Dive, we talked about the importance of having an alt attribute at all and how different email recipients use alt text. Today, we’re talking about some overarching best practices, and next time we’ll get into more detail than you ever thought was possible about image alt text. So let’s get at it.
Alternative Text Best Practices:
- Match the content
Essentially, your alt text should communicate what the image communicates. I’ve seen plenty of text on an image that goes into detail about an upcoming sale, lists out the products that are on sale and any exceptions, and the alt text reads “10% off Shoes”. That’s obviously wrong. If the image is communicating something, the alt text needs to communicate the same thing. - Keep it short and clear
Your alt text should say whatever is necessary to communicate the images’ content in as few words as possible without losing meaning. We’re not pontificating here, we’re just stating plainly what the image is communicating. Detail is good, but clarity is better. - Use Null
alt=""
An empty alt attribute is better than none. This is best used when there is a decorative image or when the alt text would just repeat content that already exists on the page. - Beware character caps
Some screen readers cap alt text at 100-120 characters long. Front-load alt text if it is longer so that the important content gets read. - Don’t be a broken record
Do not repeat the same information, whether that’s repeated images with the same alt text or if the image’s alt text says the same thing as other text on the email. - Do not use the phrases “image of …” or “graphic of …” to describe the image
The screen reader does this for you unless you are defining something specific. For example, when showcasing artwork in various mediums, it would make sense to say “painting of,” “photograph of,” or other descriptors that would help to better understand the content. - Do not match case
Use sentence case or title case rather than all caps. Screen readers frequently spell out all-caps text. - Ensure color contrast
In cases where the images do not load, you’ll want to make sure that there is appropriate color contrast between your alt text and it’s background color. This can get a little tricky when you consider dark mode, so make sure you test this out. Most email testing services have an option to display your email with images off, use it! - Consider the context
Context is one of the most critical aspects of alt text and one where I think a lot of email marketers start to go sideways. An image can mean a million things in a million different settings and good alt text utilizes that fact to ensure the recipient understands what the image is communicating.
I’ve recently seen an uptick in alt text conversations that essentially say, “Describe everything about the image,” and I have thoughts. I think it’s important to remember the goal of your email; what are you communicating? In that respect – there is some room for leniency here – if you are writing alt text for a lifestyle product photo, you can go into some detail about the location or activity that supports the product or the goals of the email. Likewise, if you have an image with text on it, you don’t need to define the font or color unless you are selling fonts! If there is a lifestyle image of a family, you should not describe every family member’s hair and eye color, foot size, et cetera, unless it’s relevant.
Not every detail is valuable here, and it’s your job as the alt text writer to determine what is valuable. If that sounds daunting, this is just a friendly reminder that you choose what is valuable throughout the entire email creation process. Alt text is just one of your responsibilities, you got this! Next week we’ll get into some specific kinds of images and their alt text needs.