MM 440: Web Presentation

Lecture//Accessible Design

Overview
The Question
Differences in Perception
Access Technologies

What to Consider
Background and Text
Images
Links
Frames
PDFs
Shockwave
Tables
User Interaction
Testing
Best Practices

Further Info

• The alternative text attribute (ALT text) of the image tag exists to provide a textual representation of the image for people accessing the page in a non-graphic way (e.g. text only, speech or braille). The ALT text should convey what is important or relevant about the image:

  • If what is important is the actual content of the image, the ALT text should consist of a brief description of the image, e.g. "A photo of my house".

    U.S. Department of Education Seal

    <IMG SRC="../images/doe-seal.jpg" WIDTH="115" HEIGHT="118" BORDER="0" ALT="U.S. Department of Education Seal">

  • If the image is essentially functional (e.g. a "Search Now" button) the ALT text should convey the function. In the case of the example given, the ALT text could be, simply, "Search Now" - a description of what the button looks like is unnecessary.

    Search

    <IMG SRC="../images/image-style-3.jpg" WIDTH="58" HEIGHT="20" BORDER="0" ALT="Search">

     

  • If the image is a bullet or a horizontal section divider, the ALT text should be a text representation of the same thing, e.g. " - " or " # " for bullets, or " - - - " for a divider.

  • If the image is essentially "eye candy" or is used for the purpose of visual layout (e.g. "spacer" images), the ALT text should be set to read "*". This will let the user know that the image contains no information and performs no relevant function - they are not left in the position of knowing the image exists but being unsure of what it might contain or do.

    Animated picture of palm tree

    <IMG SRC="../images/images-eyecandy-5.gif" ALT="Animated picture of palm tree" WIDTH="150" HEIGHT="130" BORDER="0">

• Longer descriptions of more complex images may be provided by using the LONGDESC attribute, or by placing a "d" next to the image and linking that to a page containing the detailed description.

  ">

  Photo of a man sitting next to a computer reading braille and the Section 508 logo at bottom right corner of image.

  <IMG src="../images/walking2.gif" border=0 alt="Photo of a man sitting next to a computer reading braille and the Section 508 logo at bottom right corner of image">

• The linked areas of image maps should always have meaningful ALT text, and text versions of the links should always be provided. Some access technology will be able to make use of the ALT text, but not all software can handle image maps, hence the need for the additional text links.

next page >