Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Wed

3

APR

2002

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

WebsiteTips.com’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

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - The Zen of CSS Design, by Dave Shea, Molly E. Holzschlag. Published by Peachpit Press, December 2004.

Cover: Information Architecture, 2nd Edition - by Louis Rosenfeld, Peter Morville. OReilly Media, Inc.; 2nd edition (August 15, 2002).

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2002/04/03/alt/
Page last modified 14 July, 2007 - 10:22pm PDT Page load time: 0.009950 seconds.