OnChange Event Accessibility Issues

The HTML option element with the onChange event is very inaccessible to keyboard-only users. IE and most other browsers trigger the onChange event on up and down arrow key presses, which most users expect to use to view the options. IE has a little-known feature that allows use of Control+Up arrow and Control+Down arrow to view options without triggering onChange events, but few people know about this feature. This onChange technique should not be used since users cannot easily find and select options.

HTML Markup

option: option element is used for presenting a list of options to a user in a pulldown or list box styling
onChange event: The event is typically triggered in a option element when the up or down arrow keys are pressed

Related Accessibility Requirements

Section 508: § 1194.21 (a) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.; § 1194.22 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
W3C WCAG 1.0: 8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1 in this case]; 6.4 For scripts and applets, ensure that event handlers are input device-independent. [Priority 2]; 9.3 For scripts, specify logical event handlers rather than device-dependent event handlers. [Priority 2]

Example of the Problem

Source Code of Inaccessible Form

.....

  <script language="javascript" type="text/javascript">

     function gotourl( mySelect ) {
      myIndex = mySelect.selectedIndex;
      myValue = mySelect.options[myIndex].value;
      window.location.href = myValue;
   }

  </script>

.....

  <form name="form1" title="Inaccessible form Example">
    <label>Go to best practice topic
    <select name="select1" size="1" onchange="gotourl(this)">
      <option value="../standards/">Standards</option>
      <option value="../nav/">Navigation</option>
      <option value="../text/">Text Descriptions</option>
      <option value="../auto/">Automation</option>
      <option value="../styling/">Styling</option>
    </select>
    </label>
  </form>

.....

Example Solution

Source Code of Solution

  <form name="form2" title="Accessible form example">
    <label>Pick best practice topic
    <select id="select2" size="1">
      <option value="../standards/">Standards</option>
      <option value="../nav/">Navigation</option>
      <option value="../text/">Text Descriptions</option>
      <option value="../auto/">Automation</option>
      <option value="../styling/">Styling</option>
    </select>
    </label>
  <input onclick="gotourl(document.getElementById('select2'))" value="Go to topic" type="button">
  </form>

Main Menu