Section 2.1: Defining Accessible Images, Part 3

ALT Text

One common way to associate text alternatives with an image is through the use of a coding attribute call "ALT text". Hence, the name of this tutorial. "The Art of ALT" is a reference to the art of creating meaningful and appropriate alternative text for an image in a Web page.

How an image is used helps to determine the appropriate ALT text. As you saw in the last activity, an image may be an example of a concept in the content of the page. The same image can be used as a decorative portion of the page. These images would not likely have the same ALT text even though the actual image has not changed. Because understanding the purpose of the image is important to writing appropriate ALT text, the content developer or the one who knows the rationale for selecting images should also (in many cases) be the one who writes the alt text.

The HTML code for associating ALT text with an image looks something like this:
<IMG SRC="http://www.somewhere.edu/images/imagefile.jpg" alt="Photo of Slatin's head">
where

• IMG is the HTML image element;
• SRC is the HTML attribute identifying the name and location of the image file to be displayed; and
• alt is the HTML attribute that contains the text to be associated with the image; this text is read aloud by screenreaders and talking browsers, displayed by text-only browsers, and converted to Braille characters by Braille displays

The blue arrow below has alt text associated with it that is appropriate for its purpose.

Listen to JAWS read this graphic.

Transcript of Audio Clip

Link graphic Next page

Note that JAWS automatically adds the words “link” and “graphic”; these are helpful for the user but are not part of the alt text.