<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: Jump menu should be device-independent</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">Jump menu should be device-independent</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">WAI / WCAG 1.0 Priority 2 checkpoint 9.2</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 page contains a <strong>jump menu</strong> (i.e. a menu with a
                     list of options each leading to a different page) based on a
                     <strong>SELECT</strong> element with an <strong>ONCHANGE</strong>
                     event handler that loads another page. This behavior prevents
                     visitors using keyboards to scroll through the list to select an
                     option.
                     
                  </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 fix</b>
                  
                  
                  <p>
                     There are two steps to make the jump menu device independent:
                     
                  </p>
                  
                  
                  <ol>
                     
                     
                     <li>remove the <strong>ONCHANGE</strong> attribute from the SELECT
                        element;
                     </li> 
                     
                     
                     <li>add a button (INPUT of type BUTTON) after the menu;</li>
                     
                     
                     <li>assign an attribute ONCLICK to the button with the content of
                        the ONCHANGE attribute previously removed. 
                     </li>
                     
                     <li> Finally, put the same content inside the ONKEYPRESS attribute.</li>
                     
                     
                  </ol>
                  
                  
                  
                  
                  <p>
                     When adding a Dreamweaver <strong>jump menu</strong> object to the
                     document, it is possible to automatically insert a button after the
                     menu. Simply enable the checkbox '<strong>Insert Go Button After
                        Menu</strong>'. Remember to remove the ONCHANGE attribute of SELECT
                     and to add ONKEYPRESS to the button.  
                     
                  </p>
                  
                  
                  
                  
                  <p>
                     For example, the following code is <strong>wrong</strong>:
                     
                  </p>
                  
                  <pre>
&lt;form name="select_country"&gt;
Select a country:
  &lt;select name="country" onChange="MM_jumpMenu('parent',this,0)"&gt;
   &lt;option value="http://www.this_site.com/be" selected&gt;Belgium&lt;/option&gt;
   &lt;option value="http://www.this_site.com/us"&gt;United States&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
</pre>
                  
                  
                  <p>
                     An accessible version is:
                     
                  </p>
                  
                  
                  <pre>
&lt;form name="select_country" action="http://www.this_site.com/jump.cgi"&gt;
Select a country: 
  &lt;select name="country"&gt;
   &lt;option value="http://www.this_site.com/be" selected&gt;Belgium&lt;/option&gt;
   &lt;option value="http://www.this_site.com/us"&gt;United States&lt;/option&gt;
  &lt;/select&gt;
 &lt;input type="submit" value="Go"&gt;
&lt;/form&gt;
</pre>
                  
                  
                  </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 JavaScript code associated with the SELECT element does not allow the user to
                     scroll through the available options when using a keyboard. It is not
                     <strong>device independent</strong>.
                     
                  </p>
                  
                  
                  <p>
                     JavaScript code is device independent if: 
                     <br>
                     users can interact with a website using input and output devices of
                     their choice. Input devices may include pointing devices, keyboards,
                     Braille devices, microphones, and others. Output devices
                     may include monitors, speech synthesizers, and Braille devices.
                     
                  </p>
                  
                  <p> Generally, pages that allow keyboard interaction are also
                     accessible through speech input or a command line interface.
                     
                  </p>
                  
                  
                  <p>
                     Remember also that a <strong>jump menu</strong> works only if
                     JavaScript is enabled and available on users' browsers.  There are
                     browsers that do not support JavaScript (e.g. for cell phones and
                     PDAs) and there are organizations that turn off JavaScript from
                     normal browsers for security reasons. <br> Include a NOSCRIPT tag
                     with alternative and equivalent content and interaction (i.e. links
                     and forms).
                     
                  </p>
                  
                  
                  
                  <p>
                     Consider also writing a server-side script to process the URLs passed
                     by the menu and to deliver the appropriate page.
                     
                  </p>
                  
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>