Designing Accessible Web Pages

Images

One of the most basic guidelines (it's the first Quick-tip) is:

• Images & animations. Use the alt attribute to describe the function of each visual.

Images can be clip art, pictures (photos or scanned images), or drawings you make yourself. Images can quickly provide an abundance of information, but they can also be a barrier for persons without image access (e.g., persons with visual impairments, persons who do not read images well, and persons with slower speed modems who have images turned off). Also, those who use PDA's (Personal Digital Assistants), like Palm Pilots or Pocket PCs, or cell phones cannot access the information conveyed by an image. 

The W3C illustrates ways to work with images: alternative text (alt-tag) and the "d" description. Click here for additional detail on these methods from W3C or use the following examples:

The images below are an example of the "ALT-tag" method. Below is a picture of the duck hitting the computer with a hammer. Point to it and see what appears...

If you saw a small box appearing with text in it, then that is the ALT tag. The tag says "hatecomp.jpg (18587 bytes) "-- that's the name and size of the file. To a person who cannot see the image it is pretty meaningless. But we can give it an ALT (alternative) html tag (code) that the screen reader can read. Point to this picture:

Notice it now says, "Picture of Dr. Wheaton." This is how you can add an ALT tag to your images using FrontPage.

For some important images, however, you may want to give more information. You can do this by using what are called d-tags. The procedure for creating d-tags is simple:
1. Create a new HTML page which contains only the text that describes the image well.
2. Write a character 'd' next to the image and make that 'd' a hyperlink to the file created in Step 1.

 Click on the d next to the Web accessibility symbol below:

d

A list of images that are not "tagged" correctly may be read by a screen reader as "graphic", "graphic" "graphic" etc., such as the image below.  Or the screen reader may not recognize that there is an image on the page without the text provided by the ALT tag.

Next