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:

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:

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

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

Applies CSS font-styling
to ALT text

Outlook 2007

Sort of

Replaces ALT text with
security message

Outlook 2003

Applies CSS font-styling
to ALT text

Outlook Express

Applies CSS font-styling
to ALT text

Eudora

Sort of

Replaces ALT text with
URL to image

Yahoo Mail

Displays ALT text: no

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.

Windows Live Mail

Displays ALT text: no

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.

.Mac

Displays ALT text: sometimes

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

Hotmail

Displays ALT text: no

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.

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.

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 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.