Back in 2007 we did a bit of testing regarding the display of ALT text in the popular email clients. Flash forward to 2010 and we felt it was about time to do a bit of a refresher. Not only are there new email clients on the scene, but some of the existing clients have changed their tune towards displaying ALT text when images are blocked. Plus, we’ve got a couple of tips that we’d love to share while we’re at it.

Do ya think I’m text-y?

… so said Rod Stewart. First of all, why use ALT text? Consider the following email newsletter:

Now, consider if someone received it in an email client where images are either blocked by default, or intentionally. What would it look like?

Thankfully, the designers of this email newsletter have taken this into account and added some handy ALT text. As a result, the images that have text in them (eg. ‘Friend us on Facebook’) still have meaningful descriptions when images are blocked or turned off.

Now, consider how important this would be if you were visually-impaired and using a screen-reader to assist with reading your email. In this case, ALT text could mean all the difference. We see a lot of email newsletters that use images for headings and links – these can be particularly hard to understand if they’re not accompanied by useful descriptions.

That said, not all email clients are equal when it comes to supporting the ALT attribute, so lets look at the state of affairs in some of the top email clients.

ALT text in different email clients

We’ll explain what each of the descriptions mean in a moment, but here’s a run-down of the top email clients, market share and how they display ALT text:

Client

Renders ALT Text

Outlook 2003

Info

Outlook Express

Info

Windows Live Mail

No

Yahoo! Mail

Yes

Outlook 2007/2010

Info

iPhone

Yes

Gmail

Yes

Apple Mail

Yes

Thunderbird

Yes

Now, it isn’t all as dire as it may seem – in most of these email clients, images are displayed by default. However, there are a fair few quirks to be aware of.

Image width and height must be specified

We’ve had cases where email clients like Apple Mail have not displayed ALT text, despite what’s been determined above. Generally the reason has been that the <img> width and height have not been added to the HTML attributes, causing the placeholder to collapse.

Windows Live Hotmail doesn’t display ALT text

We’ve seen some curious changes in Windows Live Hotmail, but unfortunately, the ability to display ALT text isn’t one of them:

Now, we don’t have an axe to grind with Hotmail, but from a usability perspective, this is pretty stiff. Plus, the way they grey out images can turn even the most majestic of email designs (like our newsletter, ha!) into an ugly duckling.

On top of that, images are blocked the first time you receive an email from a sender and a warning message is displayed (see pictured). Once you give an email newsletter the nod, images will display on all consequent campaigns.

Outlook’s ‘Right click here to download pictures…’ message

Outlook ’03 / ’07 / ’10

Second off the shelf are the security warnings visible in Outlook ’03 / ’07 / ’10. On the upside, any ALT text is featured in the image placeholder (see right). On the downside, it’s prefaced by an long speel on protecting your privacy. With smaller images, there seems to be little point adding ALT text at all.

Outlook Express

This isn’t the case with Outlook Express, which is comparatively liberal when it comes to displaying ALT text. With Express, you can use CSS to style the color of your ALT text, which is great for image-based headings.

No complaints from Entourage

Legendary customer Jeremy Bechtold generously sent in screenshots from Entourage 2004 & 2008. These email clients display ALT text, too. Thanks, Jeremy! We’ve also been told that CSS styling also works in these clients.

Tip: Keep ALT text short and sweet (or pay)

Now, one recurring glitch that came up during our testing was that a number of major email clients simply reject ALT text that exceeds the width of an image. For example, he’s two images in Outlook Express, with some fairly-long ALT text in one and a one-word description in the other:

So the takeaway here is to keep your descriptions short. Really short. Otherwise, they could disappear altogether.

Tip: Style your ALT text with CSS (and not with header tags)

In so much as we regularly see droll descriptions in image placeholders, it is possible to give your ALT text a little jazz within a variety of email clients. Using CSS styles, you can change the height and color of ALT text in: Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.

This is a particularly useful technique for header graphics, logos and other images that require a little emphasis. Awesome customer @obxdesignworks contributed this image to show how he uses styled ALT text in the header of his emails:

Neat! However, as per the tip above, we’d probably keep our descriptions a little shorter.

Quite a few folks suggest wrapping images with header tags (eg. <h1>) to achieve similar results, however I don’t recommend doing this. In a few email clients, big gaps appeared above and below the wrapped image during our tests, so I’d stick to CSS styling for now.

It may be very easy to forget about adding ALT text to images, but as you’ve seen, they do make email newsletters considerably more usable for folks with email clients with image blocking enabled, or those who use screen readers. So remember – write ’em short, style ’em up and keep your email newsletters text-y!

Just as a note, many people don’t seem to add useful or appropriate alt text to their images. Please remember that alt text must be able to replace an image, and any meaning the image provides should be also be provided by the alt text.

If the image is for decoration only then the alt attribute should be left blank. In the above example the text “Young lady holding a credit card” doesn’t provide any meaning and only adds confusion. Presumably the image was of a young lady holding a credit card, but did that mean anything or was it just for decoration? If it did have some meaning then the alt text should explain that.

Great to hear from you, Mr Haswell! And a solid comment, plus an awesome resource there to boot. You make a good point when you say that the best ALT text is sometimes none at all (for decorative images, anyway) – initially I only extended this rule to small images, but considering the bridal email above (where they’ve omitted the ALT), it makes loads of sense.

Neil L

Thanks for the good advice :-)We always try to specify good alt text and try to emphasize this with clients too… the only thing is that if you’re adding an image in Campaign Monitor the Alt text is generated automatically, usually using a combination of numbers and the file name…

Are there plans to allow alt text to be manually specified (perhaps in a similar way to how you specify the links?)… otherwise we can’t change it!

Doug M

+1 for Neil L’s post. “Are there plans to allow alt text to be manually specified?”

Yannick

I’ve started playing with role and aria-level attributes to emulate headers witthout <hn> tag.

Still investigating support in my free time though :)

hcabbos

I agree with Neil and Doug. There should be a field for inputting alt text.

Ros Hodgekiss

Neil, Doug & hcabbos – Good call on adding ALT text to images via the editor. I can’t say that it’s going to happen overnight, but I’ve added your votes and hopefully we’ll see it nudged into a future release.

Ben

I find in some email clients that if alt text has un-encoded characters these are better than encoding. For example Â£ can be encoded with £ . But some email clients display the £ instead of encoding it and showing the expected Â£.

PMcKern

Add my vote for a means to add alt text in CM. I was hoping that this article was an indication that the feature had finally been added, so I’m in let-down mode here. I’ve always found it odd, given CM’s interest in best practices (and an article advocating it, no less), that there is no way in CM’s design tools to add any alt text. I’m unaware of any workaround to make it happen, apart from putting something generic in the template, and would love to know if there is a way to make more specific alt text that will work with CM templates.

Billee D.

Thanks for the mention, Ros. I only wished that I had taken the screen shot from something like Mail or Gmail. In Opera, where I took that screen shot from, the alt text doesn’t reflow and ends up getting truncated a bit. Seems to work just fine in most clients though.

IT-Contractor-Mortgages

Useful post, thanks. In my experience email marketing is becoming so much more of a science than it ever was and using these tags will help to get the response rate up a few percent.

Byron

LTH

I was also a little disapointed after reading this post, that it’s still not possibel to add alt text in CM. I hope this feature will be implemented soon!

Neil L

Great thanks Ros :-)

Dozza

If using CSS to style ALT tags, use high contrast text against background colour, to make it as accessible/readable as possible. I.e. not dark green on a green background!

Pedant

Outlook prepends the security message. Sorry!

Martin

We love Campaign monitor but would like to add our vote to see manual alt tags added to the system. This ia a great article on the significance of alt tags, but without asking our designer to manually enter them each time we send a campaign (which defeats the object of Campaign monitor) we canâ€™t add or edit them ourselves.

Jacques

+1 vote for me for adding ALT text with dynamic images. Alt tags are obviously important and it’s a shame clients can’t manage this with the editor.

Joe

I currently test in Hotmail, Yahoo, and Gmail, (in IE and FF) and the alt tags always appear. Entourage however, seems to only display a select few alt tags.

Ros Hodgekiss

Jacques & Martin – Thanks for your votes! Well noted.Joe – Are you on a Mac or PC? I’ll check it out, however I’d love to see your Entourage screenshots.

Ralph Thompson

great post thanks

Anwar

I’m still missing the ALT option in de Template editor. I think alot of people would stress to implement that option.

Patrice Bellan

I didn’t see it mentionned anywhere but here’s a use I make of alt text: at the top of the emails I send, I include a transparent pixel without setting its dimensions (bad practice but useful here), and set it’s alt to something like“We recommend that you change your setting and display pictures […]”

Since lots of people don’t see pictures by default and lots don’t even think about changing their setting, a little reminder seemed useful to me.

Ros Hodgekiss

Anwar – Thanks for your vote for this, I’ve certainly taken it into consideration.

Patrice – This is a pretty nifty trick, there! It might not work in all email clients, but I’m looking forward to giving that a go and seeing if its something we can recommend adding to email campaigns in general. Thanks for sharing that with us!

Andrew Mobbs

+1 for alt text editing capabilities please CM team :)

Patrice Bellan

Ros – It’s not looking perfect on every client, but to me it’s no big deal since the only ones who should be able to notice that are the ones already seing a degraded version of the email :)

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.

You should also check out this other helpful content.

Guide

The Modern Guidebook to Email Marketing

Get helpful and actionable tips to be a better email marketer today.

Infographic

5 Emails Every Marketer Should Send

Discover the five emails every marketer should send.

Guide

50 Must-Have Content Ideas for Your Email Newsletter

Get 50 awesome content ideas for your email newsletter.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.