To choose the correct text equivalent, use the following guidelines. Always keep your text equivalents as concise as possible. For most images the text equivalent should be 50 characters or less. Find the question that best suits your image and click on the link below for guidance on how to fix it.

All Images

Text Equivalant Guide

Is the graphic a link?

• Describe the destination of the link.

Does the graphic display text?

• Use the text displayed.

Is the graphic purely decorative or used to maintainpage layout or spacing?

• Use a single space.

Is the graphic an animation?

• Make sure to display all of the information displayed by the animation.

Does the graphic display lots of information?

• Define a general alt tag for the image and describe all of the other content on a seperate page through a long description.

If none of these apply?

• Use a concise description.

---

Checkpoint (A) Techniques

See the Checkpoint (A) Techniques for HTML instructions on this section.

---

Simple Images

If the image is used as a simple graphic and not as a link, you must describe what meaning you intend the viewer to receive from the graphic.

Example

A correct text equivalent for this image would be "Smiley Face" or "Happy Face."

<IMG SRC="facehap.gif" ALT="Happy Face" />

---

Images Used as Links

If the image is linked, you must describe the destination or purpose of the link -- not the image.

Example

Here, the drawing of a house links to the home page. An appropriate alt text would be "home page."

<A HREF="home.htm"><IMG SRC="home.gif" ALT="Home page" /></A>

---

Graphic Representations of Text

For an image that includes only text (because you want to use special graphical font-effects or other transformations that would be difficult or impossible using style sheets), use the words of the image as the text equivalent.

Example

The appropriate alt text would be "Web Accessibility Initiative."

<IMG SRC="wai.gif" ALT="Web Accessibility Initiative" />

---

Purely Decorative Images or "Spacers"

Purely decorative or layout images refer to images on a web site that provide no content, and are used for design only. An example of a purely decorative image is the rounded corner on the navigation bar at the top of this page. Since both of these types of images convey no content to the visitor, the appropriate text equivalent for a spacer or layout image would be an empty alt tag.

Example

A layout trick used by many authors is to create a very small transparent image file and force white space between other objects by setting the required height and width or hspace and vspace attributes of the IMG element. (Of course, you could instead use style sheet markup to do your layout.)

<IMG src="spacer.gif" hspace=100 vspace=10 alt=" " />

Note: There is a space between the quotation marks in the alt attribute.

---

Animations

The text equivalent for an animation must describe all content conveyed by that animation.

Example

An appropriate text equivalent for this image would be "An animated expanding a bursting balloon."

<IMG SRC="ani-bal.gif" ALT="An animated expanding and bursting balloon" />

---

Graphics that Convery Large Amounts of Information

If an image conveys a large amount of information which is important to your page, then you must provide a method for that information to be accessed by an individual using a screen reader. If the text of your web page has all information conveyed through the image, a general text equivalent is all that is necessary for that image.

However, if all of the information is not described in the text then a separate web page must be created that does describe the image in detail. Once that page is created the developer must create a way for the screen reader to know that this image has a descriptive page.

The "longdesc" attribute to the image tag was created for this reason. The "longdesc" attribute informs the screen reader that this image has a descriptive page, and allows them to go to that page.

Also, although not required, it is also a standard convention to add a "D" after the image that requires a long description tag and make that "D" a hyperlink to the longdesc tag.

Example

D

<IMG SRC="graph1.gif" LONGDESC="graph1.htm" ALT="3-d sales chart." /> <A HREF="graph1.htm">D</A>

This page adopted from the the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.