<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: Non spacer IMG with equivalent 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">Non spacer IMG with equivalent 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 appears to have more than a decorative role (i.e.,
                     it is not a spacer). It should have an equivalent textual
                     description.
                     
                  </p>
                  
               </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 check</b>
                  
                  <p>
                     Check to make sure the current ALT description conveys the
                     meaning of the image.
                     
                  </p>
                  
                  
                  <p>
                     The description should explain the role the image plays on
                     the page: why it is there, what it represents, how it
                     presents the information. Imagine hearing the description
                     over the phone.
                     
                  </p>
                  
                  
                  <p>
                     If the image is used as the content of a link and you
                     provide link text too, use a space as the ALT attribute
                     value of the IMG element. In such a case, link text should
                     be the alternative description for the image.
                     
                  </p>
                  
                  
                  <p>
                     If the image is used as a hidden link, then its ALT
                     attribute should describe the link destination.
                     
                  </p>
                  
                  
                  <p>
                     If the image has only decorative purposes (such as images
                     used for bullets or spacers), the ALT string should be a
                     empty string ("") or a blank one (" ").
                     
                  </p>
                  
               </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>
                     The ALT attribute describes the associated image so that
                     users without graphics-enabled browsers can still
                     effectively navigate the page.
                     
                  </p>
                  
                  
                  <p>
                     The description should convey the same information as the
                     image and it should explain the role the image plays on the
                     page - why it is there, what it represents, how it presents
                     the information.
                     
                  </p>
                  
                  
                  <p>
                     If the image is used within a hidden link (that is, a
                     normal A tag with a spacer as label), then its ALT
                     attribute should describe the link destination. The ALT
                     content is all that non-graphical browsers show for a
                     hidden link. (Hidden links is a technique that can be used
                     to fulfill the 508 rule 1194.22(o), which states "A method
                     shall be provided that permits users to skip repetitive
                     navigation links," and the WAI checkpoint 13.6.)
                     
                  </p>
                  
                  
                  <p>
                     Notice that adding a good alternative description to images
                     is very important today as many users, for one reason or
                     the other, are not able to take advantage of graphics. They
                     include users of cellular phones, PDAs, or browsers
                     installed in cars.
                     
                  </p>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>