AREA with valid ALT  
Section 508 1194.22(a); WAI / WCAG 1.0 checkpoint 1.1
 
 
Issue Description

The image map included in this document does not have AREAs elements with valid textual descriptions. A valid description is a string value of the ALT attribute that is not any the following:

  • an empty string ("")
  • a string with one or more spaces (" ")
  • the name of the image file
  • the size of the image file
  • a string longer than 150 characters (this is actually only a suggestion - it is not a WCAG 1.0 or 508 requirement)
 
 
How to fix

Add the ALT attribute to the AREA tag while keeping the following points in mind:

  • The description should explain the link destination, or why the user would want to follow it.
  • Do not mention the mechanics such as "click here", but describe the destination of the link and its role for the user.
  • ALT descriptions are not interpreted by browsers, and should not include HTML tags. Embedded tags can only confuse users and possibly search engines as well.
  • ALT descriptions that are too long may be truncated by browsers and increase the time required to download the page (a good rule of thumb is to use less than 10 words and 64 characters).
 
 
Issue Explanation

ALT attributes are the means to provide text equivalents for image maps. Doing so is important since image maps convey visual information crucial for navigation.

The ALT attribute should describe the associated area of the image so that users without graphics-enabled browsers can still effectively navigate the page. Without ALT descriptions, such users would not be able to navigate through the image map.

Each AREA element of the image map should have its own ALT attribute. Example (taken and revised from a tutorial at http://www.jimthatcher.com/webcourse2.htm):

   <IMG src="map.gif" alt="navigation" usemap="#navigation">
   <MAP name="navigation">
   <AREA coords="1,1,40,100" alt="home" href="../index.html">
   <AREA coords="1,100,40,180" alt="products"
href="products.html">
   </MAP>

As with other links, the link text should make sense when read out of context. Good link text should not be overly general. Do not use "click here." Not only is this phrase device-dependent (it implies a pointing device), but it says nothing about what is to be found if the link is clicked. Instead of "click here," link text should indicate the nature of the link target, as in "more information about sea lions" or "text-only version of this page".

The advent of hand-held, text-only browsers makes the use of the ALT descriptions more important now than ever. Consider that many users by choice or necessity use text-only browsers with screen readers or speaking browsers. They include visually impaired persons, people using the web over a phone, and people using a speaking browser in the car.

Until user agents are able to render text equivalents for client-side image map links, you can make your page accessible to users that cannot see the graphics by providing redundant textual links for each active region of a client-side image map. By providing the ALT description for AREA elements, however, your page is already compliant with respect to these new browsers.