Page Design: Visual Elements
WAI Definition (Checkpoint 1.1)
Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.
Provide a text equivalent for every non-text element as listed above. The text equivalent can be in the form of an "alt" attribute or a "longdesc" attribute.
Some types of information may not be directly accessible to everyone. Images, for example, are not directly accessible by someone who cannot see, and audio files are not directly accessible by someone who cannot hear. Certain users will therefore require that the equivalent information or functionality be provided in text format in order to be compatible with assistive technologies.
Use an "alt" and/or a "longdesc" attribute on every "img" element or other non-text object inserted in the HTML code.
The "alt" attribute gives a short description of the image. It is the most common way of providing an alternative text description.
"Alt" attribute for a photo of New York:
<img src="ny.jpg" ... alt="Picture of New York City" />
The "longdesc" attribute provides a link to a longer description of the image. This is particularly useful for images that convey a lot of information such as charts.
"Alt" attribute and "longdesc" for a pie chart
<img src="budget_chart.jpg" ... alt="Pie chart of the 2006 budget" longdesc="chart.htm" />
If an image does not convey any information and only serves a decorative purpose, add an empty "alt" attribute. Decorative elements can be defined in a CSS style sheet.
"Alt" attribute for a decorative image:
<img src="line.gif" alt="" /> (there should be no space between the quotes)
When an image is used in a form to replace a submit button, use the "alt" attribute.
"Alt" attribute for an image serving as a form button:
<input class="img_button" type="submit" name="Submit" value="Submit" alt="submit">
Using the Firefox Web Developer's Toolbar (plugin):
Go to Images > Outline images without "alt" attribute
Go to Images > Replace images with "alt"
No image exists without an "alt" attribute.
The information conveyed through the use of images is replaced by descriptive "alt" attribute. No information is missing.
There are no "alt" attribute with meaningless information (such as "spacer" or "blue line"). "Meaningless information" is considered information that is not fully descriptive of the element.