Alt Text: Your second subject line

, Sunday, November 4th, 2007

With accessibility being more and more important these days, particularly for organizations that are required to be Section 508 compliant, there’s been a lot of discussion of “How accessible is too accessible?” This generally involves questions of how much instruction to include, whether to use accesskeys, and to what extent it’s important that a site look good when text size is increased, at the cost of how it looks when the text size is normal.

But one area that’s rarely discussed is when and when not to use Alt tags, particularly in email. Alt tags, the captions that appears when the image does not, or when hovering over an image, are particularly handy for describing to screen readers what the included images are. They can also improve site search engine optimization and act as a place to put copyright info.

But they can wreck havoc on emails, when messages like this arrive in your inbox:

Email I received

More below the fold on why Alt tags like this are unnecessary and why it’s important to consider your teaser when writing an email.

The first thing I thought when I saw this email was, “It’s a message about photos of people on conference calls? That’s a little strange…” Looking closer at it, it appears that this was just the Alt text of one of the photos in the standard header, so, in theory, every email ReadyTalk sends is about photos of people on conference calls.

Outlook is one of several email readers that gives a short teaser along with the sender and subject line. Many users find this information vital when deciding whether to open an email right away or leave it until later, and whether that email is spam or not.

Beyond just alt tags, the tendency to try to hide other system information or to place navigation at the top of an email can often result in poorly planned teasers. – a look through my Gmail box revealed emails about such topics as:

The latest – Sign up – Contact – RSS Feed

This message was sent to [me]@gmail.com. To remove yourself, click here

Yahoo – Help width=1 Do not reply to this message

To ensure delivery to your inbox, please add etrade@email.etradefinancial.com to your address book

and my personal favorite:

If this email does not show correctly, click here to show it in your browser

which is a 100-foot tall sign in neon letter that reads “Mass mail en route!” None of these are messages that you want to be leading with, so consider moving them down to the footer, if you use them at all (obviously, you need an unsubscribe and want to include a navigation, but “Do not reply” could be used as an autoresponder (or companies could respond by email instead of just webform and robot phone menu) and there’s some debate on how to best phrase an “open in browser” link, if it’s used).

With regard to Alt tags, however, a smarter way to consider them is This really isn't helpful Alt text to ask if it’s really necessary to know what’s in the image to understand the email. So, to use the example at the top from Readytalk, I would argue that the images in the header, while attractive and useful for branding purposes, are not really relevant to the email, so I’d cut the Alt text. A callout with a call to action, on the other hand, is very relevant, so I’d make sure to include that.

To a lesser extent, the same applies on the web. Do people really need to know that your header images are header images or what they contain? More dramatically, do they need to know that spacers are there? On the other hand, your logo should always include Alt text – in addition to being good branding for accessibility, it’s good a SEO practice.

Looking back on my earlier posts, it seems that I’ve generally made use of Alt text either to describe images, to add that necessary credit for images borrowed under CC licence from Flickr, or to add a caption that just doesn’t fit in the space. I’m as guilty as anyone of not Alt tagging consistently.

But when I send you an email, you can be sure it’s not going to be about, “Click here to display this in a browser.”

2 Responses to “Alt Text: Your second subject line”

  1. Benjamin Hawkes-Lewis Says:

    Your post doesn’t make a clear enough distinction between “alt tags” and “alt text”: even if you do not provide ALT text you must still include an ALT “tag” (properly, <IMG> is an HTML tag, ALT is an HTML attribute). As the name implies, ALT is there to specify a text alternative for the information intended to be conveyed by the image. ALT should never be used for information that is not a text alternative, such as a CC licence or supplementary captions or ambiguous call to actions (“Click here”) that require you to be able to see the image to make any sense of them. If you must use an attribute for this type of information, use the TITLE attribute which most browsers will render as a tooltip when you mouse over the image.

    If you do not specify a text alternative, screen readers and text browsers generally assume the image is significant and provide some sort of poor man’s text alternative. Substitutes range from the ambiguous (“image”) to the cacophonous (reading out a SRC URL), but they are rarely informative. So all IMG elements should have an ALT attribute that specifies the correct text equivalent.

    For images that are not buttons or links and do not add any information to the page at all, such as spacer images or purely decorative fluff, the proper text alternative is /nothing/. But a screen reader can’t know that so you need to make it explicit by providing an ALT attribute that is empty: ALT=”". Now, if an image is a link or button, it’s very important to provide an ALT text equivalent describing the destination or action even if that equivalent duplicates a separate text link! Partly because of the way DHTML event scripting works, assistive technology can never be sure whether an image link and a text link genuinely do the same thing, so again leaving out the ALT attribute only forces assistive technology to come up with some sort of substitute text equivalent.

    Provide empty ALT attributes for decorative images may seem redundant, but it’s a logical consequence of authors’ common failure to provide text alternatives for important images. If in doubt, assistive technology has to assume an image is important content, not dross.

    For more information about the ALT attribute and text equivalents, see:

    http://www.w3.org/QA/Tips/altAttribute

    http://www.w3.org/TR/WCAG20/#text-equiv

    http://www.bbc.co.uk/guidelines/newmedia/accessibility/text_equivs.shtml

    http://joeclark.org/book/sashay/serialization/Chapter06.html

  2. John Brian Says:

    Benjamin,

    Thank you for the corrections – I was writing mostly from a marketing perspective, particularly with regard to what the ALT attribute has become, rather than looking at what it’s supposed to do – similar to how <UL> has been used for more than creating lists and so on.

    If folks would like to read more about accessibility, Tim here at Beaconfire has written several excellent posts on designing accessible websites.