<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 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">INPUT 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>
                     Image used as a button in the form does not have a valid
                     textual description.
                     
                  </p>
                  
                  
                  <p>
                     Image does not have a LONGDESC attribute linking it to an
                     HTML file that provides a detailed description that would
                     not fit in the ALT attribute. A valid description is a
                     string value of the ALT attribute that is not any of the
                     following:
                     
                  </p>
                  
                  
                  <ul>
                     
                     <li>
                        an empty string ("")
                        
                     </li>
                     
                     
                     <li>
                        a blank 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 - 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 INPUT element while keeping the
                     following in mind:
                     
                  </p>
                  
                  <ul>
                     
                     <li>
                        The description should explain the effect of clicking on
                        the button.
                        
                     </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>
                  
                  
                  <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 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>
            <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 ALT descriptions more
                     important now than ever.
                     
                  </p>
                  
                  
                  <p>
                     If the button image does not have a textual description,
                     users of non-graphical browsers will have no idea what
                     clicking on that button will do.
                     
                  </p>
                  
                  
                  <p>
                     Beware of another possible problem:
                     
                  </p>
                  
                  
                  <p>
                     When the mouse is used to click on the image, the form and
                     the click coordinates are submitted to the server.
                     
                  </p>
                  
                  
                  <p>
                     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>