Accessibility Hub

 

site header

ALT Text

Standard: All images must include an ALT attribute.

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" />

Recommendation: The use of square brackets around ALT text is recommended, especially if/when the alternative text may lead to confusion when read in conjunction with surrounding text.

Since user agents that do not support images generally render text in a linear fashion, it is important that text that is out of context is indicated as such. Using square brackets ([]) often helps differentiate an image's ALT text from the paragraph text; text only browsers will render the brackets and, depending on user settings, they will be announced in screen reader software.

For example:

<img src="../imagename.jpg" border="0" alt="[Photo - My Pet dog Rover, a Labrador Retriever]" />

when used in a paragraph block, might read like:

"When I was a young boy, I was inseparable from my dog, and best friend, Rover. [Photo - My Pet dog Rover, a Labrador Retriever] We could be seen every day, walking down the street on the way to Mr. Hooper's store."

Without the presence of the square brackets around the ALT text, the paragraph would make little sense.

Standard: All images that are being used to display text information must include the same text information in the ALT text.

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]" />

Standard: Images that are used for strictly for decorative purposes must use Alt=""

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.