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).

Complex Images

The pie chart below depicts browser market share for October 2007. An image was used to create a greater visual impact for sighted users, but visually impaired users can't see it and the image contains too much information to be summed up in the alt attribute. Therefore the longdesc attribute of the img tag must be used along with the alt attribute.

The longdesc attribute references a text file version of the pie chart. The information presented in the text file is available only to screen reader users. Visual browsers cannot access the text file. Be sure to include alt-text or screen readers will not be able to access the longdesc. Also, include an absolute path to the text file. A relative path does not work.

img alt="Browser Market Share Pie Chart" longdesc="http://www.crawforddesign.com/
web_accessibility/text-equivalents/browsers.html"
src="/webaccessibility/img/browser_chart.gif" width="472" height="310"

Browser Market Share Pie Chart

Alternatives to Images

There are alternatives to using images that contain complex information:

Having only one text version of complex information saves times because there is only one file to update. When there is a text version and an image version of the same data, errors can be made and the files may not coincide with each other.

Sensory Experience

A sensory experience is a video or image that is not purely decorative and does not primarily convey important information or perform a function.

Examples

If non-text content is primarily intended to create a specific sensory experience, text alternatives such as a long description, alt text or a simple text description before or after the sensory experience provide descriptive identification of the non-text content.

Buttons

Image buttons are input elements with type="image". Image buttons must contain alt-text. When screen readers encounter an image button, they treat it much like a push button and use the alt-text instead of the value. Here are two examples of buttons.

Plain Input Button

input tabindex="1" type="submit" name="search" value="Search"

Input Button with an Image

input tabindex="1" type="image" src="/web-accessibility/img/search_button.gif" alt="Search"

Buttons in Context

Some buttons may make sense in context to sighted users, but may get confusing to screen reader users. The button below says "Find Out How." But what does Find Out How refer to? Even if the button is in context of a title or paragraph, it is always good to add some more descriptive alt-text to describe the meaning of "Find Out How."

input tabindex="1" type="image" src="/web-accessibility/img/find_out_how.gif" alt="Find out how to save 10% at Office Depot."

Image Links

An image link is an image inside an anchor tag. The alt-text should specify the function of the link. The CHOP tumblers image in the intranet banner is a link to the home page. The alt-text should say, "Home."

img src="/web-accessibility/img/globalBanner.jpg" alt="Home" width="351" height="75" hspace="0" vspace="0" border="0

Home

References

Top