W3CWeb Accessibility Initiative Home

ONCHANGE attribute for SELECT elements

On this page: Test 1 | References | About these tests

Nearby: More HTML 4.01 Tests | UAAG 1.0 Test Suite

UAAG 1.0 Requirement

Checkpoint 1.2 Activate event handlers (Priority 1 )
Provision 1 : Allow the user to activate, through keyboard input alone, all input device event handlers that are explicitly associated with the element designated by the content focus.

Test 1 :

Procedure

  1. Using the keyboard or an assistive technology that emulates the keyboard, move focus to the select control.
  2. Using the keyboard or an assistive technology that emulates the keyboard, select a value from the menu to trigger the onChange event.

Run test

red star

Expected results

  1. A star colored according to the select option value appears when the onchange event is triggered.

Source code

<table summary="layout table">
  <tbody>
    <tr>
      <td rowspan="1" colspan="1">
        <form action="../action/return.html" method="post" id="menuForm" name="menuForm" enctype="application/x-www-form-urlencoded">
          <select id="select1" onchange="changeTest()" name="select1">
            <option value="0" selected="selected">Choose a color</option>
            <option value="1">Red Star</option>
            <option value="2">Yellow Star</option>
            <option value="3">Pink Star</option>
          </select>
        </form>
      </td>
      <td rowspan="1" colspan="1">
        <table border="1" summary="layout table">
          <tbody>
            <tr>
              <td rowspan="1" colspan="1">
                <img id="testStar" height="35" alt="red star" src="../images/clear.gif" width="35" border="0" name="testStar"></img>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Test Script Code

imageArray = new Array("../images/clear.gif", "../images/starRed.gif", "../images/starYel.gif", "../images/starPink.gif"); altArray = new Array("", "Red Star", "Yellow Star", "Pink Star"); function changeTest () { var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value; document.testStar.src = imageArray[Index]; document.testStar.alt = altArray[Index]; }

References

  1. HTML 4.01 specification for ONCHANGE
  2. HTML 4.01 specification for SELECT

About this test suite

This test is part of a test suite for the User Agent Accessibility Guidelines (UAAG) 1.0 . This work is conducted by the User Agent Accessibility Guidelines Working Group , which is part of W3C's Web Accessibility Initiative (WAI) . Please send comments on this test to w3c-wai-ua@w3.org ( public archive ).

Test created by:

Last modified: $Date: 2004/03/09 18:53:26 $ by $Author: jongund $

Copyright © 1999 - 2003 W3C® ( MIT , INRIA , Keio ), All Rights Reserved. W3C liability , trademark , document use and software licensing rules apply.