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.
Text Equivalent Guide
Is the graphic a link?
Does the graphic display text?
Is the graphic purely decorative or used to maintain page layout or spacing?
Is the graphic an 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 separate page through a long description.
If none of these apply?
Checkpoint (A) Techniques
See the Checkpoint (A) Techniques for HTML instructions on this section.
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.
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.
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.
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.
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.
The text equivalent for an animation must describe all content conveyed by that animation.
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 Convey 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.
<IMG SRC="graph1.gif" LONGDESC="graph1.htm" ALT="3-d sales chart." /> <A HREF="graph1.htm">D</A>