What is a Text Equivalent?

Fixing the Problem
Writing Good ALT Text
Checking Your Pages for ALT Text
Next Topic: Multimedia
Back to Web Accessibility Index

Every image, graphic, animation, video file, audio file or anything that is NOT text based requires something in a text format which provides equivalent content. The most common violation of this rule is not adding ALT text to graphics and images on your web site.

Perhaps you have a button which people click to go to your services page. This button is a graphic with the word SERVICES.

. This button has ALT text added. Hover your mouse over it to see the ALT text.

This button has no ALT text. A screen reader will only say "Graphic" when it comes to this so the user will not be able to discern where the button will take them.

Fixing the Problem

How to add ALT text demonstration
Printable/Accessible HTML Version(opens in new window)

Some graphics cannot be described in simple ALT text. For instance, a bar graph or pie chart would require a longer description so that a text description conveys the same data. To do this, you would either use the longdesc tag to link to a text page or a simple D Link to link to a text page with the description.

Watch a Viewlet demonstrating how to add a longdesc tag
Printable/Accessible HTML Version (opens in new window)

Watch a Viewlet demonstrating how to create a D Link
Printable/Accessible HTML Version (opens in new window)

Decorative elements like borders or grahpics with no other function must have an EMPTY alt tag (space or alt="") but they should never NOT have an ALT tag.

Viewlets require Macromedia Flash Player.

Back to top

Writing Good ALT Text

Sometimes you may struggle with writing ALT text that is succinct but yet complete enough for understanding. Here are some tips to help you out.

Imagine hearing the screen reader say:
Click on your choice now:
[Link]
[Link]

Or about this one,
Another fine web site from [logo]

Of course, ALT text can contain TOO much information as well, a logo at the top of the Federal IT Accessibility Initiative site used to have the following ALT text:
FITAI emblem of 5 blue stars in a circle with 3 red stripes moving through the stars – Federal IT Accessibility Initiative – agency partnerships promoting accessibility.

Tips for Meaningful ALT Text

• Limit the length of your ALT text.
• If the image is used for navigation, use ALT text that indicates where clicking the image will take you. You don’t have to be lengthy by saying “Link to the Services Web Page”. Just simply “Services” or the text of the button or image you’ve used will suffice.
• Bullets! Sometimes graphic images are simply bullets. Your best ALT text for bullets is a “-“ or “*”. Do not write ALT text that says, ‘Yellow Bullet’. Screen readers will render results like: “Yellow Bullet Home Page, Yellow Bullet Contact Us Page, Yellow Bullet Administration” which sounds ridiculous.
• If an image is purely decorative, like a horizontal line, spacer image or decorative border, use a blank ALT tag so that alt=’” ”. You may actually need to edit the HTML code directly to do this.

Some Good Resources for Learning About Quality ALT Tags
http://www.htmlhelp.com/feature/art3.htm
http://www.pantos.org/atw/35534.html

Back to top

Checking Your Pages for ALT Text

You can use the University licensed software AccVerify to check your web pages and report missing ALT text. But there are other techniques that may be useful also.

• Turn off images in Internet Explorer. From the Tools menu, choose Internet Options and then click the Advanced tab. Scroll down the list to the Multimedia section and remove the checkbox in front of Show Pictures.
• Use the backwards compatibility checker at http://www.delorie.com/web/wpbcv.html. Remove all checkmarks for Images, Break ALT-less images and Break Width/Height-less images and run your page. The page will appear without images and show you ALT text in its place. Read the page out loud to get a feel for how it will sound for a screen reader.

Back to top