A A A A A

onChange Event Accessibility Issues Examples

HTML Markup Details

:accesskey
Can be defined for links and form controls on a web resource, including the following html elements: a, area, button, input, label, legend, and textarea

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>

Scripting

Other HTML Best Practices

Working Group