1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.02.02 JavaScript usage: Select menus

onChange and onSelect navigation

The onChange event handler is triggered when a form element is selected and changed (for example, when a radio button is initially selected or when the text changes within a text box). The onSelect event handler is processed when text is selected within a text field or text area.

Although these event handlers are device independent and can be activated using the mouse, keyboard, or other device, the actions that are performed as a result of these event handlers must be analysed to determine if they cause accessibility problems.


onChange example

The following drop-down menu form element is used for navigation. By selecting an item from the list, JavaScript will automatically open the specified page within the browser.

Onchange HTML example

<script type="text/javascript">
<!--
function goto_URL(object) {
  window.location.href = object.options[object.selectedIndex].value;
}
//-->
</script>


<form method="post" action="page1.html" onsubmit="return false;">
  <p>
    <label for="selectPage">Go to:</label>
    <select name="selectName" onchange="goto_URL(this.form.selectName)">
      <option value="">Select a page:</option>
      <option value="page1.html">Page 1</option>
      <option value="page2.html">Page 2</option>
      <option value="page3.html">Page 3</option>
    </select>
  </p>
</form>

Problems

The JavaScript causes the browser to go to a new page using onChange or when the user selects an item from the select list. If the end user is using a keyboard, the onChange event handler is executed for every item within the list. It is impossible for the user to directly select the last item in the list, as each previous item within the list will trigger the page change.

The only way the user can select the last menu item is by navigating to the page for the first item in the list, then pressing the "Back" button, navigating to the second item, then pressing the "Back" button, and so forth until the last menu item is accessed.


Solutions

Rather than using the onChange event handler, allow the user to select the item from a list then select a button or submit the form to activate the script. When server-side scripting is used to process the form information and redirect the browser accordingly, there is no need for JavaScript at all. The following code demonstrates one method of fixing the onChange problem.

Select a page using the drop-down menu then select the "Go!" button.

Onclick HTML example

<form method="post" action="page1.html" onsubmit="return false;">
  <p>
    <label for="selectPage2">Go to:</label>
    <select name="selectPage2" id="selectPage2">
      <option value="">Select a page:</option>
      <option value="page1.html">Page 1</option>
      <option value="page2.html">Page 2</option>
      <option value="page3.html">Page 3</option>
    </select>
    <input type="button" value="Go!" onclick="goto_URL(this.form.selectPage2);" />
  </p>
</form>

Question 2

Which of the following are accessible alternatives to using onChange with form menus for navigation? (Choose all that apply)