Article 8: ALT Tags

by Bernie Howe
Copyright � 2004 by Bernard Howe.  All rights reserved.

There seems to be a growing debate about the correct use of ALT tags:

How much text should be allowed;
What should be included in ALT tags;
Describing the graphic in ALT tags;
Listing the copyright in ALT tags;
Listing the width and height of images in ALT tags.

It would seem that everyone now wants to make up their own rules concerning the use of ALT tags.  However, the reality is that ALT tags are a replacement for the image if the image cannot be seen.  (This could involve those who
are blind, or those who browse with images turned off, or those who use text-only viewers.)

What should the ALT tag really do?

ALT stands for alternative text, and here are some guidelines on how to use ALT tags correctly:

ALT tags should be a text equivalent of the image.  Keep it short, as it is not to be a description of the image.  Descriptions are written using the LONGDESC or (d) links.  Long descriptions and (d) links are links to another
page where the explanation is located.

If graphic is used as a link, then state that in the ALT tag.  For example:

<img src="arrow.gif" width="13px" height="10px" alt="link to Jim's car repair">

Use text that would make sense if you saw only the text and not the graphic.  A couple of examples: If the above code was read in context it would look like this:

"To get your car repaired go to Jim's Car Repair"  "link to Jim's car repair"

If the description was for a 10-by-13 arrow graphic it would read like this:

"To get your car repaired go to Jim's Car Repair"  "arrow graphic 10 x 13"

If you were reading this, or having a screen reader read this page for you, which would sound better?

The Bobby accessibility tester says you need to have text in all ALT tags.  However, the opinion of many blind people and accessibility consultants is that this is pure bunk.  If you leave the ALT tag blank, like this:

<alt="">

then screen readers will skip over them, and text viewers would look like this:

""

This technique works well for page dividers, listing objects, directional arrows, and page fillers and decorations for sighted visitors.

Back to the top

ALT text questions

The requirement for alternative text also applies to images that carry no information like "spacer.gif" (assuming the role of spacer.gif is just to fill in some space).  Write alt="" for the alternative text to indicate that
an image contains no relevant information:

<img src="images/spacer.gif" alt="">

This tells assistive technologies, "Don't bother trying to get any information about this image," and screen readers or text browsers will completely ignore the image.  If you do not place alt="" for unimportant images, your site cannot pass accessibility checks, and blind users may have to listen to strings inserted by the assistive technology, such as:

IMAGE cache.homeschool.com/@v=srRjq-h@/images/spacer.gif

Imagine how awful a lot of those type announcements would sound.  Why clutter up your page with meaningless text when the graphic is not meaningful?

If we are telling people that you can make good-looking pages while making them accessible, then why make webmasters take out all the little extra things that give them a sense of building a site, which is a part of them?  Many times, filler graphics will add flavor to a web site.  Good graphics will enhance a web site, too, especially in commercial sites that are selling items.  They like to have graphics of the products they are selling.  Moreover, people with screen readers and text viewers do not see the picture to begin with, so why keep throwing this up to them?

To get a good idea of how your page would look without graphics, take a look at it with a screen reader like the one at Delorie.com:

http://www.delorie.com/web/lynxview.html

Just type in your page address and it will convert your page to text.  You can also see how a screen reader would read your page.  Symbols are also read by screen readers; for example, "-" is "dash,"  "#" is "pound sign," "/" is "forward slash," and so on.

Back to the top

W3C Recommendation for ALT tags

13.8 How to specify alternate text

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally.  Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements.  It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care.  Authors should observe the following guidelines:

• Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph.  In such cases, the alternate text should be the empty string ("").  Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
• Do not specify meaningless alternate text (e.g., "dummy text").  Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

(The above section of text used by permission.  Copyright � 1997-1999 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University).  All Rights Reserved.
http://www.w3.org/TR/html4/struct/objects.html#h-13.8)
 

Back to the top

About The Author

Bernie Howe made his first Web page in 1998, and has been involved with accessibility and Web standards since then.  He is owner/designer of Keepsake Awards.

Professionally, Bernie has been in the construction trade since 1969, and is a project engineer/CAD manager for a construction firm that does maintenance for the high-tech industry. 

Bernie has been married since 1966, and has 2 children and 3 grandchildren.  He is also a cancer survivor, (he was diagnosed with prostate cancer in 1999).  He lives in the Sonoran Desert of Arizona.