ALT Text

To ensure that the equivalent information is being provided to all users, images which convey important information relevant to the text must also include the ALT attribute in the image element, such as in the example below:

<img src="../imagename.jpg" border="0" alt="appropriate and meaningful text" />

The intent of the ALT text (short for "alternative" text) is to describe what the image is and/or is intended to convey. This is important not only for visually impaired users but for any user who may be accessing the web content without the ability to view pictures, such as those using text-only terminals or PDAs.

Equally important, but much harder to test for, is the need for appropriate and meaningful ALT text associated with the image. ALT text must be carefully chosen to convey the intent of the image being used, or to accurately describe the image. An image declaration with the ALT text of "button" for example is of no use to the end user; the same holds true for ALT text such as "bicycle" or "dog"; they may accurately describe the image, but they do not convey the intent of the image. Better examples would be:

<img src="../imagename.jpg" border="0" alt="Photograph of a green bicycle leaning against a brick wall" />

or

<img src="../imagename.jpg" border="0" alt="My pet dog Rover, a Labrador Retriever" />

While in every instance the use of on-screen text is preferred, if you must use text within your image, ensure that the same text is used in your ALT attribute.

<img src="../imagename.jpg" border="0" alt="[Register Now]" />

The web has become for many a visual medium wherein decorative design elements can enhance a user's experience; at the same time, the absence of some decorative elements does not detract from the content of a page. However, it is important that even in these circumstances the image declaration contain an empty ALT attribute. This programmatically tells screen reading technologies that the image should be read out as [nothing]; the absence of the null ALT text in most cases is that the screen reading technology will announce the file name of the image in question.

<img src="../decorative_imagename.jpg" border="0" />

Developers should also consider placing purely decorative images in the stylesheet(s) associated with the document.