Crawford Design

Logo

Text Equivalents

Not everyone can see images; therefore text equivalents should be included in every img element. If there is a textual equivalent for an image, users who are visually impaired will be able to listen to that text with a screen reader or talking browser.

Alt-text

Every img element must have alternative text specified in the alt attribute. That text is referred to as alt-text. Alt-text should convey the information in the image or the purpose (function) of the image.

Alt-text should be short and descriptive. It is recommended that it be less than 60 characters long. If a longer description is needed for a more complex image like a graph or chart, use the longdesc attribute.

Applying Alt-text

Writing alt-text can be very straight forward. The photo of the planet Saturn below is very simple. The alt text could be: alt="Planet Saturn".

img alt="Planet Saturn" src="/webaccessibility/img/saturn.jpg" width="310" height="222"

Planet Saturn

Some images, like the one below, are a little more complex. The little character's name is Toad. The alt-text could say alt="Toad running away from a bullet", but a visually impaired person may think of the amphibian, not a guy named Toad. More descriptive text may be needed: alt="Guy named Toad running from a large angry bullet"

img alt="Guy named Toad running from a large angry bullet" src="/webaccessibility/img/toad.jpg" width="310" height="222"

Guy named Toad running from a large angry bullet

Grouping Images

Be very careful that alt-text reads well when images are placed next to each other. Alt-text may make sense and pass accessibility testing, but may not provide a good user experience:

"Chainsaw squirrel cycling? That sounds horrible," exclaimed a screen reader user while testing the parks section of a Web site. Three images in a row had the alt-text "chainsaw", "squirrel", and "cycling". The actual images were "forestry", "wildlife conservation," and "outdoor activities".

Decorative Images

CSS should be used for all decorative images and formatting (ie. fancy corners on a page or a decorative horizontal rule). If using the img element to format a page is unavoidable, alt-text is not needed for those decorative formatting images. These images should always have null alt-text. This means using alt="" (two quotes and no space).

References