This is a draft document supplied by the WCAG Techniques Task Force. It in no way represents a WCAG Working Group consensus or agreement and is provided for informational and discussion purposes only. The accessibility test listed below should not be construed as required for conformance with the proposed WCAG2.
select
elements do not cause an extreme change in context.Copyright 2005, ATRC, University Of Toronto, All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
This test case was created by the ATRC at the University Of Toronto. It should not be construed as required for conformance with the proposed WCAG2.
The complete list of tests may be found at http://www.w3.org/WAI/GL/WCAG20/tests/
Comments on this test may be made to the WCAG mailing list.
As part of the conformance test process, this test has a status of 'pending'.
Guideline: 3.2 - Make the placement and functionality of content predictable.
Success Criteria:
3. Changing the setting of any input field does not automatically cause a change of context .
Level 2
The WCAG2 has 3 priority levels for making Web content accessible. This test has a priority of 'Level 2'.
The WCAG Working Group has created techniques that describe how Web content may be made accessible. The following techniques are related to this test:
There are no prerequisite tests for this test.
select
elements in the content.select
element contains an onchange
attribute.select
elements do not cause an extreme change in context.onchange
attribute from the select
element or modify the event handler so it does not cause a page reload or extreme change of context.Any accessibility check may be performed after this test.
These test files contain examples of the accessibility problem detectable by this test. They may also contain more accessibility problems than the one described in this test. Please ignore any extraneous accessibility problems in these files.
select
element's onchange
attribute causes extreme change of context.)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>OAC Testfile - Check #92 - Positive</title>
</head>
<body>
<form action="http://www.example.com/test" method="post">
<p>
<label for="select1">Pick A Number:</label> <select name="abcselect" id="select1" onchange="form.submit();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</form>
</body>
</html>
select
element's onchange
attribute does not cause extreme change of context.)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>OAC Testfile - Check #92 - Negative</title>
</head>
<body>
<form action="http://www.example.com/test" method="post">
<p>
<label for="select1">Pick A Number:</label> <select name="abcselect" id="select1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><input type="submit" value="select number"/>
</p>
</form>
</body>
</html>
select
element's onchange
attribute does not cause extreme change of context.)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
countryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
function countryChange(selectObj) {
var idx = selectObj.selectedIndex;
var which = selectObj.options[idx].value;
cList = countryLists[which];
var cSelect = document.getElementById("country");
// remove the current options
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
try {
cSelect.add(newOption); // this will fail in Dom browsers
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>
<h1>Dynamic Select Statements</h1>
<form action="http://www.example.com/test" method="post">
<p>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<br />
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
<br/><input type="submit" value="select country"/>
</p>
</form>
</body>
</html>