Jump menu should be device-independent |
WAI / WCAG 1.0 Priority 2 checkpoint 9.2
Issue Description The page contains a jump menu (i.e. a menu with a list of options each leading to a different page) based on a SELECT element with an ONCHANGE event handler that loads another page. This behavior prevents visitors using keyboards to scroll through the list to select an option.
How to fix There are two steps to make the jump menu device independent: remove the ONCHANGE attribute from the SELECT element; add a button (INPUT of type BUTTON) after the menu; assign an attribute ONCLICK to the button with the content of the ONCHANGE attribute previously removed. Finally, put the same content inside the ONKEYPRESS attribute. When adding a Dreamweaver jump menu object to the document, it is possible to automatically insert a button after the menu. Simply enable the checkbox 'Insert Go Button After Menu'. Remember to remove the ONCHANGE attribute of SELECT and to add ONKEYPRESS to the button. For example, the following code is wrong:
    <form name="select_country">
    Select a country:
      <select name="country" onChange="MM_jumpMenu('parent',this,0)">
       <option value="http://www.this_site.com/be" selected>Belgium</option>
       <option value="http://www.this_site.com/us">United States</option>
      </select>
    </form>
An accessible version is:
    <form name="select_country" action="http://www.this_site.com/jump.cgi">
    Select a country:
      <select name="country">
       <option value="http://www.this_site.com/be" selected>Belgium</option>
       <option value="http://www.this_site.com/us">United States</option>
      </select>
     <input type="submit" value="Go">
    </form>
Issue Explanation 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 device independent. JavaScript code is device independent if: 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. Generally, pages that allow keyboard interaction are also accessible through speech input or a command line interface. Remember also that a jump menu 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. Include a NOSCRIPT tag with alternative and equivalent content and interaction (i.e. links and forms). Consider also writing a server-side script to process the URLs passed by the menu and to deliver the appropriate page.