View/print complete tutorial.	Page 7 of 10.	Return to Contents
Beginning   PREVIOUS || NEXT   End

Images and ALT tags.

Every image decorative, informational, or functional (button) needs to have an alternative description or ALT tag, which a screen reader uses to convey information about the image. Because these descriptions are read each time the image is detected, they should be kept short (64 characters or less). When a longer description is needed, designers can use the "longdesc" attribute to point to a page where more detailed information about the image or graphic is provided.

Types of images:

Image Links (buttons/logos): When the image is "clicked," a link is activated. In these cases, the ALT tag also serves as the link description and must follow the same guidelines for good link text. Don't use repeating phrases like "click here" or "go." Avoid vague descriptions such as "link" or "main." It is also usually not a good idea to rewrite the URL of the link in the ALT tag.

Our two image links appear at the bottom of the Practice.htm page. The ALT tags are "College of Humanities" and "The Ohio State University" the same as the link text that appears below each image.

Accessibility tip: When using both an image-link and text-link leading to the same location, wrap the <A> tag around both the <IMG> and the text to avoid having the link appear twice on a link list for the page.

Decorative Images: Images used to add color, visual interest, or design to the site do not need descriptive ALT tags. Instead the ALT tag for these images should be empty (alt=""). Screen readers ignore images with empty ALT tags, as if they did not exist. Examples of decorative images include divider lines, boxes, fillers or placeholders, borders, corners, and backgrounds.

Accessibility tip: Make your default choice the "empty" ALT tag. Then go back and add ALT tags to only those key graphics that add content or function as well as visual appeal.

Informative/Functional Images: Graphs, charts, logos, pictures, product snapshots, scans of books or other materials, covers, drawings of course materials, and many, many other images used on web sites that convey information require descriptive ALT tags that convey the same information in text to visually impaired readers.

Some informative or functional images require only simple descriptions (e.g "President Holbrook addresses graduates."). However, more detailed and complex images may require lengthy descriptions. These more detailed descriptions should be placed on a separate HTML page and should be linked using the LONGDESC attribute in the IMG tag. For examples of the LONGDESC, see the WAC Best Practices Tutorial: Images online.

Image Maps: Client-side image maps are an easy way to assign different "clickable" or "actionable" areas on a single image. For example, in an image on the top of a department page: clicking on the left-side of the image leads to the department home page, clicking on the middle to the department contact, and clicking on the right directs you to the accessibility page. Each map area must have its own alternate text. You should also assign an ALT tag to the image itself, behind the map.

Usability tip: Use caution when inserting image maps to avoid "mystery meat navigation" where users must guess which part of the map leads to which location or must search to find the clickable area on a given image.

OSU Standard: All non-text elements need an alternate description. These include images, graphs, charts, videos, sound files, and flash movies. Videos and movies require both a transcript (ALT text) and captioning (assistive technology).

Insert an Image

1. From the INSERT menu, choose IMAGE. OR use the insert image button on the COMMON toolbar.
2. The SELECT AN IMAGE dialog box appears:
   

   Pictured above: Select Image Source dialog box. Call out: Check that image locations are relative to the document, not the site. This will insure the portability of your site and pages.

3. If necessary, navigate to your images folder. Choose the image file you want to insert. Click OK to insert the image.
4. The IMAGE TAG ACCESSIBILITY ATTRIBUTES dialog box now appears. In the "Alternate text" box, type the image description in the box OR use the drop-down menu to choose an "empty" ALT tag for decorative or non-essential images. If needed, type the URL where a longer description of the image is located in the "Long Description" box. Otherwise, leave the box blank. Click OK to return to design mode.
   

5. You can alter the ALT tag at any time using the PROPERTIES window.
   
   However, you can only change the LONGDESC in the code window.

Create an Image Map

1. Begin by inserting the image (as described above) on which you will draw the map. Give the image an ALT tag and add a default link location, in case the map does not work.
2. With the image selected, choose a map shape from the PROPERTIES window.
   
3. Use your mouse to draw the shape hotspot area on the image. Dreamweaver puts a light blue box over the area to show you the location of the hotspot.
   

   Pictured above: Call out one: Image hotspot has been defined. Call out two: This ALT text serves as the link description for screen readers. Call out three: When hotspot area is clicked, this link will be activated.

4. Once you have finished drawing and labeling all your map areas, click on the black arrow in the PROPERTIES box to return to design mode.

View/print complete tutorial.	Page 7 of 10.	Return to Contents
Beginning   PREVIOUS || NEXT   End