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

Students Affected:

Principles: Provide Meaningful Alternatives, Degrade Gracefully

What It Means

Screen readers are unable to interpret images unless you provide a text equivalent, or "alt text." Alt text is a replacement for an image that serves the same purpose as the image itself. It is a meaningful alternative, not a description. For example, if the image is a graphic button with the text "Join Now and Save 20%!", the text equivalent should not be "Save 20% button." Instead, it should be the functional phrase "Join Now and Save 20%!" Adding good text equivalents is the number one thing you can do to increase accessibility.

Example (This example will only work in some Web browsers.) Hold your mouse over any image on this Web page to preview the alt text. Wait a second or two, and don't click. The alt text appears in a small square window near your cursor, like this: In this example, "Go to ADE home." is the alt text.

If You Do It Wrong: Without alt text, a screen reader may read the filename of the image or ignore the image completely. This can make your Web site unusable to students who can't see images. For example, if the navigation bar consists of graphical buttons with no text equivalents, a screen reader user may not be able to identify how to move through the site.

Listen as a screen reader reads a web page without text equivalents. Could you navigate to Dr. Quinlan's English 102 page? (Links open in new windows.) Listen to the audio file. [Windows Media || RealOne] Read the transcript. Check answer. (Audio files require the free Windows Media Player or RealOne Player. Netscape users may experience problems with Windows Media files.)

If You Do It Right: With proper text equivalents, images are no longer an obstacle. Students who are blind are able to use a Web site effectively. Text equivalents are also useful to students with slow Internet connections, PDAs, cell phones, and other Web-enabled devices that do not display images. If an image doesn't download, the alt text appears on screen in place of the image.

Listen as a screen reader reads a Web page with proper text equivalents. How do you navigate to Dr. Quinlan's English 102 page? (Links open in new windows.) Listen to the audio file. [ Windows Media || RealOne ] Read the transcript. Check answer. (Audio files require the free Windows Media Player or RealOne Player. Netscape users may experience problems with Windows Media files.)

How It Works

1. Use the alt attribute of the <img> tag to create a text equivalent.
   
   

   Example <img src="banJNaS20.gif" alt="Join Now and Save 20%!">

   
   

   Web Page Editor Instructions Microsoft FrontPage Netscape Composer Dreamweaver MX

   
   
2. Write a functional description of the graphic—don't use the name of the image file. It's not helpful to hear something like "banJNaS20.gif " instead of a meaningful text equivalent.
   
   
3. Include a period at the end of the alt text. This causes screen readers to pause briefly, so images are easier to differentiate from other items on a Web page. (Don't include a period if the image is part of a sentence. For example, "The <img src="cat.gif" alt="cat"> and the hat.")
   
   
4. Describe the image as succinctly as possible. The alt text should not be longer than a short sentence or two. Complex images may require a long description in addition to a text equivalent.
   
   
5. If an image is purely decorative and conveys no information (for example, a divider line or spacer graphic), use empty alt text—two quotation marks with no space between them (alt="").
   
   
6. If an image is a bullet, use alt="*" or alt="-".
   

Note to visually impaired users: Due to the nature of the following exercise, alt text is not included on the related images. What would be appropriate alt text for each of the images below? Click the "Write Alt Text" buttons to test your answers. If you encounter problems with this exercise, a list of suggested text equivalents is available.

Testing Tips

• Accessibility evaluators are great tools for testing to see if text equivalents have been set—but they can't tell you if the alt text is correct or not. You should check each image carefully to make sure you have set a sensible text alternative.
  
  

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

  
  
  
• The free Opera Web browser includes an Images On/Off button. Click the button to turn images off and preview all of your text equivalents to see if they make sense.
  
  

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