Web Accessibility Checker : Check Details

Element

select

Error Type

Likely

Guidelines

WCAG 2.0 (Level A)
3.2 Predictable: Make Web pages appear and operate in predictable ways.
Success Criteria 3.2.2 On Input (A)
WCAG 2.0 (Level AA)
3.2 Predictable: Make Web pages appear and operate in predictable ways.
Success Criteria 3.2.2 On Input (A)
WCAG 2.0 (Level AAA)
3.2 Predictable: Make Web pages appear and operate in predictable ways.
Success Criteria 3.2.2 On Input (A)

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>