How do alt attributes appear in email?

Many email clients don’t display images by default, so it’s important to know what shows up instead. Enter alt attributes...

We’ve tested to see how alt attributes are displayed (or not displayed!) in popular email clients. But before we look at the “how,” let’s look at the “why” in ALT text.

Why ALT attributes?

Any web designer attentive to accessibility understands the benefits of ALT attributes. 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 attributes 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 attributes is also read aloud, prefaced with the announcement that the forthcoming copy 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 attributes 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 attributes.

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.

ALT attributes Display in Common Email Clients
Client Renders ALT Comments
Yahoo Mail
N/A
Yahoo Mail Beta Yes Applies CSS font-styling to ALT attributes
Windows Live Mail N/A
Gmail Sometimes Contingent upon text length
.Mac Sometimes Contingent upon text length
Hotmail N/A
Apple Mail 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

Yahoo!

Yahoo Mail Beta

Displays ALT text: no

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.

Yahoo! Beta

Windows Live Mail

Displays ALT text: no

Windows Live Mail

Gmail

Displays ALT text: sometimes

Initially, Gmail only displayed some of my ALT text. 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.

Gmail

.Mac

Displays ALT text: sometimes

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

DotMac

Hotmail

Displays ALT text: no

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.

AppleMail

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.

Thunderbird

Outlook 2007

Displays ALT text: sort of

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.

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. Outlook 2003 is also the origin of the security-message-replacement woes of Outlook 2007.

Outlook 2993

Outlook Express

Displays ALT text: yes

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

Outlook Express

Eudora

Displays ALT text: sort of

Eudora replaces ALT text with an absolute URL to the location of a respective image, but given that the path to the images is truncated, one ponders the value of this system.

Eudora

Lotus Notes

Displays ALT text: ?

Head-scratchingly, the disable images setting yielded no changes in how images were displayed.


Try it


Top

Contact UsAnti-Spam PolicyTerms of UsePrivacy PolicySitemap

Bookmark and Share