<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: AREA with valid ALT</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">AREA with valid ALT</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">
                  Section 508 1194.22(a); 
                  
                  WAI
                  
                  / 
                  
                  WCAG
                  
                  1.0 checkpoint 1.1
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  <p>
                     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:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        an empty string ("")
                        
                     </li>
                     
                     
                     <li>
                        a string with one or more spaces (" ")
                        
                     </li>
                     
                     
                     <li>
                        the name of the image file
                        
                     </li>
                     
                     
                     <li>
                        the size of the image file
                        
                     </li>
                     
                     
                     <li>
                        a string longer than 150 characters (this is actually only a
                        suggestion - it is not a WCAG 1.0 or 508 requirement)
                        
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to fix</b>
                  
                  <p>
                     Add the ALT attribute to the AREA tag while keeping the
                     following points in mind:
                     
                  </p>
                  
                  <ul>
                     
                     <li>
                        The description should explain the link destination, or
                        why the user would want to follow it.
                        
                     </li>
                     
                     
                     <li>
                        Do not mention the mechanics such as "click here", but
                        describe the destination of the link and its role for the
                        user.
                        
                     </li>
                     
                     
                     <li>
                        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.
                        
                     </li>
                     
                     
                     <li>
                        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).
                        
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  <p>
                     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.
                     
                  </p>
                  
                  
                  <p>
                     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.
                     
                  </p>
                  
                  
                  <p>
                     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): 
                     <pre>
   &lt;IMG src="map.gif" alt="navigation" usemap="#navigation"&gt;
   &lt;MAP name="navigation"&gt;
   &lt;AREA coords="1,1,40,100" alt="home" href="../index.html"&gt;
   &lt;AREA coords="1,100,40,180" alt="products"
href="products.html"&gt;
   &lt;/MAP&gt;
</pre>
                     </p>
                  
                  
                  <p>
                     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".
                     
                  </p>
                  
                  
                  <p>
                     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.
                     
                  </p>
                  
                  
                  <p>
                     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.
                     
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>