Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 112

Add an alt Attribute
Add an alt attribute to every img tag that doesn't have one.
<img src="right_arrow.gif" width="100" height="50"/>
<img src="integral.png" width="75" height="65" />
<img src="logo.png" width="42" height="42" />
<img src="right_arrow.gif" width="100" height="50" alt="next"/>
<img src="integral.png" width="75" height="65"
alt="The definite integral of x squared
between 1 and 2 equals seven thirds."/>
<img src="logo.png" width="42" height="42" alt=""/>
Motivation
The primary reason to add alt text is to assist visually impaired users. Although currently this is a relatively
small number of people with visual handicaps, in the near future this class is likely to grow quickly as audio
browsers become embedded in cell phones, cars, MP3 players, and other devices aimed at people who may
need to keep their visual attention elsewhere.
The second reason is for search engine optimization. Google, especially Google image search, pays a
disproportionate amount of attention to the text in alt attributes. If your content is visual—photographs, maps,
diagrams, and so forth—you can get quite a bit more high-quality traffic by tagging your images accurately.
Potential Trade-offs
Adding alt text requires a lot of time and human intelligence. There are few shortcuts. That being said, the
improvements are linear. You can make some of the changes and get some of the return. You don't have to do
it all at once.
Mechanics
Finding images with no alt attributes is straightforward. XHTML requires an alt attribute so that the validator
will report all img elements that do not have an alt attribute. You can also do a quick search with a regular
expression that matches img tags and all their possible attributes except alt :
<img\s+((height|width|border|class|align|id|src|usemap|hspace|vspace)\s
*=\s*("[^"]+"|'[^']+')\s*)*>
This does not match img tags that contain alt attributes and does match every other likely img tag.
However, filling in the missing attributes is not so trivial, and it requires some consideration and human
intelligence.
Every image that is part of the content should have a text description that substitutes for the image when used
by a screen reader. Sometimes this is simply a description of the image itself. For example, when I posted the