How ALT Text Renders in Popular Email Clients

Published February 06, 2007 by Mark Wyner

So off I went to test how ALT text displays in common email clients, only to find that many of them don’t display any ALT text whatsoever. Unbelievable. And to top it off a couple clients replace the author-defined ALT text with their own idea of ALT text should be (tsk tsk). But before we look at the “how,” let’s look at the “why” in ALT text.

Why ALT Text?

Any web designer attentive to accessibility understands the benefits of ALT text. It’s cardinal purpose, of course, being that it briefly describes an image to someone who is visually impaired via a screen reader. Screen readers read all of the text on a page, denoting lists, links, headlines and ALT text in images. For example, when loading markwyner.com a screen reader would read something similar to the following:

Webpage: Mark Wyner Design, Web Design Studio—Portland, Oregon.
Link 1: Navigate directly to content.
Page headline, link 2: Mark Wyner Design.
Sensible design. Accessible content. Usable interface.
Global navigation.
Home.
Link 3: About.
Link 4: Services.
Link 5: Portfolio.
LInk 6: Contact.
[…]

Note how the screen reader announces the page headline and all links, referencing the latter with numbers. Image ALT text is also read aloud, prefaced with the announcement that the forthcoming text is a text alternative to an image. So the following image:

<img src="file.jpg" width="528" height="405" alt="[photo: bowler picking up a Greek Church]" />

May be read as:

Image: Bowler picking up a Greek Church

A secondary purpose, however, is to describe an image to someone who can not or chooses not to view images in their browsing device or email client. Sadly, the latter doesn’t always work out because many browsers/clients either do not render ALT text when images are disabled or render their own variations thereof. In this article I’ll outline how common email clients display (or don’t display) ALT text.

Clients Used in Tests

Webmail

  • Yahoo Mail
  • Yahoo Mail Beta
  • Windows Live Mail
  • Gmail
  • .Mac
  • Hotmail

Desktop

  • Apple Mail
  • Thunderbird
  • Outlook 2007
  • Outlook 2003
  • Outlook Express
  • Eudora
  • Lotus Notes

Results

A trait shared among all email clients—webmail and desktop—is the ability to disable or enable images by default. And nearly every client in my test suite enabled me to load images directly from the message if they were disabled by default. The exception is Windows Live Mail in which images are loaded for known senders and disabled for unknown senders, the latter scenario exhibiting a link to enable them on the fly. These preferences may be more robust/flexible, but I just tested the basics.

ALT Text Display in Common Email Clients
Client Renders ALT Text Comments
Yahoo Mail No N/A
Yahoo Mail Beta Yes Applies CSS font-styling to ALT text
Windows Live Mail No N/A
Gmail Sometimes Contingent upon text length
.Mac Sometimes Contingent upon text length
Hotmail No N/A
Apple Mail No Replaces ALT text with question-mark icon
Thunderbird Yes Applies CSS font-styling to ALT text
Outlook 2007 Sort of Replaces ALT text with security message
Outlook 2003 Yes Applies CSS font-styling to ALT text
Outlook Express Yes Applies CSS font-styling to ALT text
Eudora Sort of Replaces ALT text with URL to image

Yahoo Mail

Displays ALT text: no

[screenshot of ALT text rendering in Yahoo Mail]

Yahoo Mail Beta

Displays ALT text: yes

The interesting thing about Yahoo Mail Beta is that applies contextually relevant CSS to the ALT text itself. So although it displays ALT text, the potential problem is that large font sizes can push the information beyond the visible border of the image box, rendering it unreadable. But this is, of course, a naturally occurring problem across the board, especially with smaller images and larger descriptions.

[screenshot of ALT text rendering in Yahoo Mail Beta]

Windows Live Mail

Displays ALT text: no

[screenshot of ALT text rendering in Windows Live Mail]

Gmail

Displays ALT text: sometimes

Initially, Gmail only displayed some of my ALT text and I couldn’t figure out why. Further testing yielded the conclusion that text length was the deciding factor. Whereas most clients display what text they can within the boundaries of a box, Gmail decides that if the text extends beyond the said border it will display nothing. Nice.

[screenshot of ALT text rendering in Gmail]

.Mac

Displays ALT text: sometimes

.Mac suffers parallel to Gmail when rendering ALT text, in that it reserves text-length contingencies.

[screenshot of ALT text rendering in .Mac]

Hotmail

Displays ALT text: no

[screenshot of ALT text rendering in Hotmail]

Apple Mail

Displays ALT text: no

The clients which do not display ALT text typically display gray boxes in place of the images. Apple Mail, however, displays open space and adds a little question-mark icon. I’m an emphatic fan of Apple products and have been using them for roughly 15 years now. Their products are always very usable and beautifully aesthetic. But I must admit that for obvious reasons it was an ill decision to replace images with a question-mark icon. While this isn’t perilous, it is something to note nonetheless.

[screenshot of ALT text rendering in Apple Mail]

Thunderbird

Displays ALT text: yes

As with Yahoo Mail Beta, Thunderbird applies contextually relevant CSS to ALT text. Again, there are no paramount consequences of this result, but it’s noteworthy all the same.

[screenshot of ALT text rendering in Thunderbird]

Outlook 2007

Displays ALT text: sort of

I’ll bite my tongue and stick to the facts on this one. Outlook 2007 prefaces all ALT text with its long-winded explanation of why an image was omitted from a message: “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.” This falls down in two very specific ways. First, this is the kind of message which should merely introduce someone to a feature. To repeat it for every image in every email indefinitely is a plethora of information. Second, it pretty much wipes out any ALT text which follows it, given the length of the preface and the average image size in an email.

[screenshot of ALT text rendering in Outlook 2007]

Outlook 2003

Displays ALT text: yes

While Yahoo Mail Beta and Thunderbird apply CSS font-size and color properties to ALT text, Outlook 2003 only applies color. I can’t think of a scenario wherein this would have a negative impact, but I feel it’s still relevant to my findings. Outlook 2003 is also the origin of the security-message-replacement woes of Outlook 2007.

[screenshot of ALT text rendering in Outlook 2003]

Outlook Express

Displays ALT text: yes

Outlook Express is parallel to Outlook 2003 regarding CSS font-properties.

[screenshot of ALT text rendering in Outlook Express]

Eudora

Displays ALT text: sort of

Eudora replaces ALT text with an absolute URL to the location of a respective image. I assume this informs a reader where the image can be found, if they feel so inclined to view the image in their browser. But given that the path to the images is truncated, I’m left pondering the value of this system.

[screenshot of ALT text rendering in Eudora]

Lotus Notes

Displays ALT text: ?

I attempted to get results for Lotus Notes but was unsuccessful in disabling images for the test. I found settings to disable images, but the setting yielded no changes in how images were displayed. I even sent a test to one of my clients who I know uses Lotus Notes at work every day. He, too, could not disable images. If someone can share this information, I’ll update the article to include Lotus Notes results and accompanying screen shot.

17 Comments

Posted in:

  1. JAbbott
    February 6, 2007 12:13pm

    Many folks encourage the use of both alt and title attributes in website HTML.  I wonder if the title attribute would perform better in this email test.

  2. Mark Wyner
    February 6, 2007 1:21pm

    Campaign Monitor team member

    JAbbot:

    Good call on the TITLE text. It of course will not render as ALT text does (in place of an image) but it does offer a second line of defense when ALT text is not rendered. And replicating ALT text using TITLE text adds insignificant weight to an email while increasing accessibility.

     

    I tested to see which email clients on my list would show the TITLE text upon mouseover. Every client herein successfully rendered the value of the TITLE tag with the exception of Lotus Notes and Thunderbird. We have come to expect failures such as this from the former, so no suprise there. And with Thunderbird, this failure is irrelevant because it is one of the few clients to render the ALT text, which is preferred anyway.

     

    So TITLE text is indeed a great supplement to, though by no means a replacement for ALT text.

  3. jim
    February 7, 2007 12:05am

    There are many ‘alternatives’ to using the alt attribute to display your ‘alternative text’...  ;-)

    plain text below the image (works everywhere - in everything) is probably best though…

  4. Wayne
    February 7, 2007 3:19am

    Add Microsoft Entourage to your list with a check and note “Applies CSS font-styling to ALT text”.

  5. Mark Wyner
    February 7, 2007 5:40am

    Campaign Monitor team member

    Jim:

    Captions! Ha, ha. Nice point, sir. In most cases wherein an image is a contextually placed within text content, this is a great idea. Of course with logos and the like, it hasn’t a place. It’s interesting; your comment brings to mind the fact that captions have been nearly a standard for images in print for as long as we can remember. However, on the web captions have become all but lost. Maybe this is good motivation for us to begin using captions on websites and in emails.

    Wayne:

    I should probably test in Entourage, but Apple Mail’s maturity has practically wiped out use of Entourage. Still, it’s easy to test so I’ll add it to the list. Thanks for your input.

  6. jumptronic
    February 8, 2007 10:15am

    Interesting tests.
    However, in my tests with gmail, alt text has always displayed properly (both with images totally disabled in the browser and with the images disabled with an option from google to enable them). In fact, I’ve even began adding style to the img tags to control the alt text in a more visibly pleasing manner. I have tested in both mac/pc environs. with the usual suspects of browsers (safari, ie 5.5-7, ff, ect…).

    As for lotus, the agency I work for uses Lotus (yeck!) and most of our clients request that their html (super-image intensive) emails display properly in Lotus. In all of my tests ALT tags have displayed just fine. Turning off images in Notes? ... we’ve done it. Its been awhile, tho. I’ll look into it and se what I find.

  7. Mark Wyner
    February 8, 2007 12:47pm

    Campaign Monitor team member

    jumptronic:

    However, in my tests with gmail, alt text has always displayed properly…

    As they do with me, provided the length is short enough. They only don’t display when the text extends beyond the width/height of the image border.

    I’ve even began adding style to the img tags…

    Nice! This is something which would take but a few mere minutes and would offer some flexibility for those blocking images.

    I’ll look into it and se what I find.

    You’re a champion. Thanks.

  8. Anna
    July 11, 2007 7:40am

    This is a great resource- thanks for consolidating. I love the snapped examples too.

  9. Dave B.
    August 30, 2007 4:44am

    Your example shows Outlook 2003 with the “right click here to download pictures…” text.  It is NOT showing the alt text.

  10. Dave Greiner
    August 30, 2007 10:22am

    Dave, while you can’t see it in the screenshots, we mentioned that:

    Outlook 2007 prefaces all ALT text with its long-winded explanation of why an image was omitted from a message.

    The alt text is displayed, but only after their default message, which kind of defeats the purpose.

  11. Trevor Lewis
    November 10, 2007 3:01am

    I think what the first Dave means is you’re using the Outlook 2007 image in the Outlook 2003 paragraph.

  12. Jessica
    December 13, 2007 4:08pm

    You mention color and font-size being applied to alt text for Outlook 2003 and Outlook Express but not Outlook 2007. I’ve just come across this issue and to me at least it seems that Outlook 2007 doesn’t even apply color to alt text.

    Is anyone else able to verify this behaviour?

  13. Derek Ahmedzai
    March 26, 2008 11:49pm

    Outlook 2003 functions the same as 2007—it shows the default message first, which means the real alt text is very rarely seen.

  14. Aaron
    July 16, 2008 2:32pm

    Actually, ALT text is specifically NOT supposed to be a “description” of the image, but an alternative to the image that makes the complete document make sense when images are not usable for any reason.
    http://www.w3.org/TR/html401/struct/objects.html#adef-alt
    “alternate text to serve as content when the element cannot be rendered normally”
    For more discussion
    http://www.webaim.org/techniques/alttext/

  15. Keri Russel
    September 14, 2008 6:24am

    Every client herein successfully rendered the value of the TITLE tag with the exception of Lotus Notes and Thunderbird. We have come to expect failures such as this from the former, so no suprise there

  16. bet365
    September 14, 2008 6:28am

    I tested to see which email clients on my list would show the TITLE text upon mouseover. It’s interesting; your comment brings to mind the fact that captions have been nearly a standard for images in print for as long as we can remember.

  17. John
    November 25, 2008 5:51am

    Title tag does NOT work for me in Outlook 2007 (as of Nov 24, 2008). Of course, nothing really works right in Outlook 2007, does it?

Comments for this entry are closed.

Browse the Blog

  1. Behind the Scenes (9)
  2. Interviews & Buzz (121)
  3. New Features & Updates (181)
  4. Observations & Answers (184)
  5. Tips & Resources (331)

Explore the Email Gallery

@eyedesignstudio Awesome to hear! ^DP

Follow us on Twitter