<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: INPUT 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">INPUT 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>
                     Image used as a button in the form has a valid description.
                     
                     <br>
                     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>
                     Test the content of the ALT attribute of the INPUT element.
                     
                     <br>
                     Remember that the description should explain the effect of
                     clicking on the button.
                     
                  </p>
                  
                  
                  <p>
                     Beware that when the mouse is used to click on the image,
                     the form and the click coordinates are submitted to the
                     server. If the server takes different actions depending on
                     the location clicked, users of non-graphical browsers will
                     be disadvantaged. For this reason, you should consider
                     alternate approaches such as the following:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        Use multiple submit buttons (each with its own image) in
                        place of a single graphical submit button. You may use
                        style sheets to control the positioning of these buttons.
                        
                     </li>
                     
                     
                     <li>
                        Use a client-side image map together with scripting.
                        
                     </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>
                     The ALT attribute describes the associated image so that
                     users without graphics-enabled browsers can still
                     effectively navigate the page. The advent of hand-held,
                     text-only browsers makes the use of the ALT descriptions
                     more important now than ever.
                     
                  </p>
                  
                  
                  <p>
                     If the button image does not have an equivalent textual
                     description, users of non-graphical browsers will have no
                     idea what clicking that button will do.
                     
                  </p>
                  
                  
                  <p>
                     Beware of another possible problem. When the mouse is used
                     to click on the image, the form and the click coordinates
                     are submitted to the server. If the server takes different
                     actions depending on the location clicked, users of
                     non-graphical browsers will be disadvantaged. For this
                     reason, you should consider alternate approaches such as
                     the following:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        Use multiple submit buttons (each with its own image) in
                        place of a single graphical submit button. You can use
                        style sheets to control the positioning of these buttons.
                        
                     </li>
                     
                     
                     <li>
                        Use a client-side image map together with scripting.
                        
                     </li>
                     
                  </ul>
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>