Element

select

Error Type

Likely

Guidelines

  • WCAG 2.0 (Level A)
    Guideline Group3.2 Predictable: Make Web pages appear and operate in predictable ways.
    Guideline SubgroupSuccess Criteria 3.2.2 On Input (A)
  • WCAG 2.0 (Level AA)
    Guideline Group3.2 Predictable: Make Web pages appear and operate in predictable ways.
    Guideline SubgroupSuccess Criteria 3.2.2 On Input (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group3.2 Predictable: Make Web pages appear and operate in predictable ways.
    Guideline SubgroupSuccess Criteria 3.2.2 On Input (A)
  • WCAG SRWSD

Requirement

All select elements do not cause an extreme change in context.

Error

select element may cause extreme change in context.

Short Description

select element cannot contain onchange attribute.

How To Determine

Question Does this select element cause an extreme change of context?
PASS select element does not cause an extreme change of context.
FAIL select element causes extreme change of context.

Steps To Check

Procedure

1. Check all select elements in the content.
2. Check if the select element contains an onchange attribute.
3. Examine the onchange handler for any action that will cause the page to reload or cause an extreme change of context.
4. Actions that will cause the page to reload or cause an extreme change of context may be variations of one of the following JavaScript statements:
5. form.submit();
6. window.location.href = uri;
7. elementElsewhereOnThePage.focus();
8. (@@other examples??)

Expected Result

1. All select elements do not cause an extreme change in context.

Failed Result

1. Remove the onchange attribute from the select element or modify the event handler so it does not cause a page reload or extreme change of context.

Examples

Pass Examples

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>

Fail Examples

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>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API