Disclaimer: The views expressed on this site are my own and do not necessarily reflect those of my employers. :) – Manning Krull

Styling alt text for emails

Here's one that blows people's minds when I tell 'em — art directors, devs, UX folks, etc. Did you know you can (and should!) style your alt text in emails?

Really? That's a thing? But why?

Alt text and emails: the basics

First, let's make sure we're on the same page about a few things regarding emails, images, and alt text. Some quick info:

We should include alt text for most* images in marketing emails. Alt text is usually provided by a copywriter and then it's inserted in the html by a developer. (*Not all images require alt text; check out my article about alt text basics.)

A large percentage of people opening marketing emails — most sources say about half — have images hidden by default.

Those users, instead of seeing the images in the email, will see the alt text that the developer has entered for each image.

By default, that alt text is usually small and gray or black, depending on the email platform.

Problems and opportunities

Problem one: If an email recipient has images hidden by default, and our email has an image that's placed in an area with a dark background color, then the default gray/black alt text might be unreadable.

Problem two: Even for an email with a light background, the default tiny gray/black alt text may be difficult or impossible to read for people with low vision or other types of visual impairments.

With so many users having images hidden in emails, alt text may be our only opportunity to convey certain parts of our message to them. And the default style of the alt text ain't gonna cut it.

Opportunity: We can style the alt text of images in emails so that it's easy to read for all users, on all background colors.

Examples

Let's pretend I have an email newsletter, and this is the header image:

An email header graphic with a large title that says Digital Philosophy and then a tagline underneath that says Insights and best practices for digital media professionals, by Manning Krull. The header has a dark gray gradient background and white text.

Assuming the email is programmed with a white background, and the image doesn't display, this is what the alt text would look like:

A white rectangle with a broken image icon and tiny black text next to it with the name and tagline of this website.

Now, let's say that this area of the email is programmed to have a gray background; what would that look like with images hidden? Take a look:

A dark gray rectangle with tiny black text on it that is very hard to make out.

Not good, and definitely not ADA-compliant.

So, the solution here is to style the alt text to be a lighter color, e.g. white:

A dark gray rectangle with a broken image icon and tiny white text next to it with the name and tagline of this website.

Problem (mostly) solved. We can take this a bit further, but first I want to show you the basic markup for this...

How to style alt text

Devs, you might be surprised to learn where the alt text styling goes in your html. It actually goes in the <img> tag, like this:

This feels kind of strange, because what we're doing here is not assigning color to the image, we're assigning it to the alt text, and this isn't explicitly denoted in the markup. No big deal! Just kind of weird.

We can also give the alt text a font, font size, and more:

A dark gray rectangle with a broken image icon and large bold white text next to it with the name and tagline of this website.

Now the alt text is readable for everyone, and ADA-compliant!

Be aware, if you enter a large quantity of alt text for an image, the text may need more space than what the image would've taken up. This may force the area it's in to become become taller. There's a chance this could break your layout a bit.

A dark gray rectangle with a broken image icon and large bold white text next to it with the name and tagline of this website, followed by a large amount of placeholder lorem ipsum text; this rectangle is much taller than the previous ones because the text takes up much more space.

You can always test what the alt text will look like in your email by temporarily moving or renaming your images folder, so the html can't find it. Refresh your browser and you'll be able to see any styling you've added for the alt text throughout the email. Restore the images folder and it'll be back to normal.

Consider the possibilities!

In theory we could (and should!) design our entire email to look great both with and without images displayed. This could result in a great boost in engagement from users who have images hidden by default.

One more thing to be aware of: we can't assign different styling to different parts of the alt text in one image, e.g. having "Digital Philosophy" appear larger and the rest of the text appear smaller. I mention this because I guarantee our team members are going to ask! We have to set these alt text styles for the whole image. Of course, each image in the email can have different alt text styles applied, if that's what we want.

What about websites?

We typically don't worry about styling the alt text for images in websites, because website visitors are very likely to see all the images we've included — unlike email, where so many users have images hidden. Alt text on websites is primarily important for people using screen reader software; this doesn't require it to have any particular styling. Same for SEO; alt text is important for SEO but this doesn't require any styling, either.

Okay, that's it! One more little trick in your arsenal that will hopefully result in better engagement for your emails. Every little bit counts.

– Manning

Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.