The Art of the ALT Attribute

Terry Sullivan of All Things Web has an easy-to-understand tutorial about how to use the ALT attribute effectively: The Art of ALT. Terry’s tutorial provides lots of good examples and links to more information. There are other helpful tutorials and articles there, too, including Could Helen Keller Read Your Page?

Why does it matter what text you include in the ALT attribute? ALT attribute text is read by some of the search engines, but there are other reasons, too. Let’s use an example of a Florida vacation image with spacer images on either side. A browser with images turned off or a voice reader would read this:

<img src="spacer.gif" height="5" width="5" alt="spacer" />
<img src="30684.gif" height="150" width="250" alt="30684.gif" />
<img src="spacer.gif" height="5" width="5" alt="spacer" />

something like this:

spacer 30684.gif spacer

Is that information very descriptive or helpful? I don’t think so. It would be better to:

  1. remove the ALT attribute text for the spacers, and
  2. provide descriptive text for the Florida vacation image ALT attribute:

    <img src="spacer.gif" height="5" width="5" alt="" />
    <img src="30684.gif" height="150" width="250" alt="photo of Florida vacation - spectacular sunrise at the beach" />
    <img src="spacer.gif" height="5" width="5" alt="" />

The above sample would feed search engines helpful keyword phrases and also provide the following results for the browser with images turned off or a voice reader:

photo of Florida vacation - spectacular sunrise at the beach

To view sites for accessibility, including ALT attribute text testing, two invaluable tools for me are the Lynx text browser and using Opera’s toggle switch to quickly turn images on or off. Both are available free and can provide amazingly helpful insight.

It only takes a moment to include helpful ALT attribute text that can make a world of difference.

More Info’s Accessibility section has links to helpful resources about ALT attributes and much more about accessible design.

[Hat tip to Holly via Webdesign-L for the link to Terry Sullivan’s tutorial.]

10:33 am, pst 3 April, 2002 Comments, Trackbacks ·';}?>

Categories: Accessibility, Browsers, Standards, Usability

*/ ?>