Creating Text Equivalents for Images:

Summary: This article describes what text equivalents are, why they are required, how to create them, and the best approach to writing and editing them.

Introduction

The alternative text attribute is required by Section 508 part 1194.21 (f) for Software applications and Operating Systems, as well as 1194.22 (a) for web based intranet and internet applications.

The alternative text attribute or text equivalent is a phrase, sentence, or combination of phrases and sentences that you write and associate with a particular image. The text should describe the image's visual appearance and or its purpose. For example, it can include instructions on how to take an action, such as navigating through online Help by clicking an arrow image.

A screen reader, such as WindowEyes by GW Micro, normally translates text into synthesized speech or a refreshable Braille display. When the developer includes text equivalents in the Web page or application, he allows the images to be translated as well.

Ideally, a text equivalent provides the user with the same information as the original content. For example, if a Web page displayed an image of an astronaut on the Moon, you might write "Astronaut placing the American flag on the Moon's surface" as the text equivalent.

Benefits of Text Equivalents

Text equivalents benefit all users, including those with slow Internet connections, those with text-only browsers, and those who are blind or have low vision. When a user places the mouse pointer over an image, the text equivalent appears as a ToolTip in some browsers. In this case, the text equivalent can establish context, provide visual interest, or assist with navigation.

Text equivalents also benefit those with slow Internet connections because such users can opt to turn off the graphics capabilities in their browsers to decrease their download times. For these users, text equivalents might provide the only source of information about the images on a Web page. In some cases, the page already contains additional text that provides some meaningful information. Similarly, text equivalents benefit those with text-only browsers.

For a person who is using a screen reader due to blindness or low vision, text equivalents can provide the only source of information about the images on a Web page. A screen reader user can navigate around a Web page, hearing information about each image and other user interface elements. In another navigation style, a screen reader user can navigate through a page by simply tabbing and listening to information about those elements that receive the focus, such as a linking image. In this case, the screen reader skips non-linking images and any text around a linking image.

Implementing Text Equivalents

In a Web-enabled application that uses HTML, place the text equivalent in the ALT attribute of the IMG tag.

<img src="images/astronaut.gif" alt="Astronaut planting the American flag on the Lunar surface">

If you are using a Web authoring tool, see the product documentation for instructions on setting the ALT attribute.

Writing Good Text Equivalents

Translate all elements of the following types into text equivalents:

• General images such as pictures, icons, decorative borders, photos, and thumbnails.
• Special images such as those used for bullets, graphical buttons, and spacer images (which are transparent images used to visually align elements on a page). Because a spacer image does not contain information, its text equivalent should be ALT="". The screen reader can then choose to ignore the image.
• Graphical representations of text such as company logos.
• Each text equivalent should briefly identify the element to which it's attached and, if appropriate, describe any functionality represented by the element. The text equivalent must therefore be succinct, descriptive and, most of all, accurate.

Due to the limits of some screen readers (such as the default 150-character limit of JAWS for Windows and 200-character limit for WindowEyes), writing an effective text equivalent is an exercise in extreme economy. The challenge is to get as much information as possible into the fewest number of characters without sacrificing intelligibility.

continue