Including alternative text (ALT text) for images is probably one of the easiest, and yet often overlooked, things that you can do to increase the accessibility of your Web site. When alternative text is not included within an image tag, students who turn off image loading on their browser, use a text-based browser such as Lynx, or use a screen reader, will be unable to know whether the image was important or just decorative. In these cases, images without alternative text will be interpreted either as [INLINE] (when the image is not a graphic link), [LINK] (when image is a graphic link), or with the browser's default missing graphic image (in graphical-mode browser such as Netscape).

Examples:

• Web page with graphics without ALT text
• Web page with graphics without ALT text, as viewed in Lynx
• Web page with graphics with ALT text
• Web page with graphics with ALT text, as viewed in Lynx

As you could tell, there was not much difference between the pages -- until they were viewed in Lynx! Correcting this accessibility error, however, is really quite simple. When using HTML image tags (such as <IMG SRC="graphic.gif">), include a short alternative text description as part of the tag (such as <IMG SRC="graphic.gif" ALT="description of the graphic goes here">).

There are times in which you may feel that the ALT tag is not necessary, such as when you have included descriptive text above or below the image. In this case, use empty quotes (<IMG SRC="graphic.gif" ALT="">) to avoid having a screen reader misinterpret the image and causing confusion for your students. Likewise, if the image is merely decorative such as a graphic bullet, use an asterisk (<IMG SRC="dot.gif" ALT="*">) in the ALT tag.

It is also important to remember to include ALT text in imagemaps, even for imagemap hot-spots. When using imagemap hot-spots (<area shape="rect" coords="5,5,100,40" href="home.html">), be sure to include a short alternative text description for the imagemap hotspot that it defines (<area shape="rect" coords="5,5,100,40" href="home.html" ALT="home">). Even if you feel that the ALT tag is not necessary because you have already included an alternative text navigational methods above or below your imagemap, include empty quotes as ALT text to avoid unnecessary confusion.