User Agent and Assistive Technology Support Notes

Description

The objective of this technique is to demonstrate how to correctly use an
onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one
or more select elements on the Web page, an onchange event on one, can
update the options in another select element on the Web page. All of the
data required by the select elements is included within the Web page.

It is important to note that the select item which is modified is after the
trigger select element in the reading order of the Web page. This ensures
that assistive technologies will pick up the change and users will encounter
the new data when the modified element receives focus. This technique relies
on JavaScript support in the user agent.

Examples

Example 1

This example contains two select elements. When an item is selected
in the first select, the choices in the other select are updated
appropriately. The first select element contains a list of
continents. The second select element will contain a partial list of
countries located in the selected continent. There is an onchange
event associated with the continent select. When the continent
selection changes, the items in the country select are modified
using JavaScript via the Document Object Model (DOM). All of the
data required, the list of countries and continents, is included
within the Web page.

Overview of the code below

countryLists array variable which contains the list of
countries for each continent in the trigger select element.

countryChange() function which is called by the onchange
event of the continent select element.

The XHTML code to create the select elements in the body of
the Web page.

Resources

Related Techniques

Tests

Procedure

Navigate to the trigger select element (in this example, the one
to select continents) and change the value of the select.

Navigate to the select element that is updated by the trigger
(in this example, the one to select countries).

Check that the matching option values are displayed in the other
select element.

Navigate to the trigger select element, navigate through the
options but do not change the value.

Check that the matching option values are still displayed in the
associated element.

It is recommended that the select elements are tested with an assistive
technology to verify that the changes to the associated element are
recognized.

Expected Results

Step #3 and #5 are true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.