W3CWeb Accessibility Initiative Home

Multiple Event Handlers for 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 2 : In order to satisfy provision one of this checkpoint, the user must be able to activate as a group all event handlers of the same input device event type. For example, if there are 10 handlers associated with the onmousedown event type, the user must be able to activate the entire group of 10 through keyboard input alone, and must not be required to activate each handler separately.

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 both onChange events.

Run test

red star second red star

Expected results

  1. A star colored according to the select option value appears in each table cell 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(); changeTest2()" name="select1">
            <option value="../images/clear.gif" selected="selected">Choose a color</option>
            <option value="../images/starRed.gif">Red Star</option>
            <option value="../images/starYel.gif">Yellow Star</option>
            <option value="../images/starPink.gif">Pink Star</option>
          </select>
        </form>
      </td>
      <td rowspan="1" colspan="1">
        <table border="1">
          <tbody>
            <tr>
              <td rowspan="1" colspan="1">
                <img id="redStar" height="35" alt="red star" src="../images/clear.gif" width="35" border="0" name="redStar"></img>
              </td>
              <td rowspan="1" colspan="1">
                <img id="redStar2" height="35" alt="second red star" src="../images/clear.gif" width="35" border="0" name="redStar2"></img>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Test Script Code

function changeTest () { document.redStar.src = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value; } function changeTest2 () { document.redStar2.src = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value; }

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: 2003/04/02 23:46:28 $ by $Author: jongund $

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