(A) Image Tags
Image Tags
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
ALT Text
A text equivalent means adding words to represent the purpose of a non-text element. This provision requires that when an image indicates a navigational action such as "move to the next screen" or "go back to the top of the page," the image must be accompanied by actual text that states the purpose of the image. This provision also requires that when an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.
<img src="logo-green.gif">
After:
<img src="logo-green.gif" alt="Green Company Logo">
Empty ALT Attribute
Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful.
<IMG src="transparent.gif" alt="blank space">
After:
<IMG src="transparent.gif" alt="">
D-link and LONGDESC
When an image has complex data, you can refer a user to another page that provides a detailed textual description using the LONGDESC attribute. The values for LONGDESC would be the page description's url. Unfortunately, most browsers do not support this attribute (Note: JAWS does). Which is why a "D" link is also recommened.
Example:<a href="graphexample.html" title="Detailed Description of Ice Cube Trade Sales">D</a>
Element Content
Finally, yet another way of providing a textual description is to include it in the page in the surrounding context:
Below is a picture of the Cal State L.A. Solar Eagle III!
