Web pages Images Conferencing Chat Audio/Video PowerPoint PDF Advanced Multimedia

Students Affected:

Principles: Provide Meaningful Alternatives, Write for Comprehension

What It Means

Many images, especially graphs, charts, and maps, contain information beyond what can be conveyed by simple alt text. The alt text provides a brief (100 characters or less) functional description of the graphic, while the long description provides details about each element of the image.

If You Do It Wrong: Some students may not have access to the content of your images.

Example A text equivalent might indicate to a screen reader or Braille user that there is a "Graph showing the change in enrollment from 1950 to 1990," but not the actual data on the changes. If you only hear the title or text equivalent can you answer basic questions about the graph, such as "Did enrollment increase or decrease?" or "When did the greatest change in enrollment occur?"

If You Do It Right: Students who are blind or have low vision can follow a link to a detailed description of the image, which supplies the information in an accessible format—for example, an accessible data table.

Example Click the Graph Description link to see an example of a long description. Changes in Enrollment from 1950 to 1990 Graph Description

How It Works

1. Create a new Web page (.html file) that contains a detailed text description of the illustration.
   
   
2. Use the longdesc attribute on the <img> tag. This indicates to screen reader users that a separate Web page provides a detailed description of the image's content.
   
   

   Example <IMG SRC="graph.gif" LONGDESC="descrip.html" ALT="Change in enrollment graph.">

   
   
3. You may also want to provide a direct link to the description page. Use the <a href> tag to link to the Web page (.html file) you created in Step 1. Make sure to use a descriptive link name—for example, "image description" or "chart description."
   
   

   Example <a href=descrip.html>Chart Description</a>

   
   
   

   Web Page Editor Instructions Microsoft FrontPage Netscape Composer Dreamweaver MX

   
   

Testing Tips

An accessibility evaluator can remind you to use long descriptions, but you'll need to make a judgment call as to which images require further explanation.

The Wave and A-Prompt are free online accessibility evaluators.

© 1996-2005 University of Maryland University College • 3501 University Blvd. East, Adelphi, MD 20783 • USA
Phone: 800-888-UMUC (800-888-8682)