Element

select

Error Type

Potential

Guidelines

  • WCAG 2.0 (Level A)
    Guideline Group1.3 Ensure that information and structure can be separated from presentation
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
    Guideline SubgroupSuccess Criteria 1.3.1 Info and Relationships (A)

Requirement

All select elements have a label that is positioned close to the control.

Error

select element's label is not positioned close to control.

How To Determine

Question Is the select element's label positioned close to the control?
PASS select element's label is positioned close to the control.
FAIL select element's label is not positioned close to the control.

Steps To Check

Procedure

1. Check all select elements\r\n2. View the select element within the document and check the positioning of its label.

Expected Result

1. The label must be positioned close to the control.

Failed Result

1. Position the label close to the control.

Examples

Pass Examples

label is positioned close to control.
<?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>ATRC Testfile 209.2 - Negative</title>
</head>
<body>
<form method="post" action="http://www.test.com">
<p><label for="animal">Animal:</label>
<select name="abcselect" id="animal">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">bird</option>
</select>
</p>
</form>
</body>
</html>

Fail Examples

label is not positioned close to control.
<?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>ATRC Testfile 209.1 - Positive</title>
</head>
<body>
<form method="post" action="http://www.test.com">
<p><label for="animal">Animal:</label></p>
<p>This is some text between the label and the control.<br/>
<select name="abcselect" id="animal">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">bird</option>
</select>
</p>
</form>
</body>
</html>

English | German | Italiano


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