Web Accessibility Checker : Check Details

Element

select

Error Type

Potential

Guidelines

WCAG 2.0 (Level A)
1.3 Ensure that information and structure can be separated from presentation
Success Criteria 1.3.1 Info and Relationships (A)
WCAG 2.0 (Level AA)
1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Success Criteria 1.3.1 Info and Relationships (A)
WCAG 2.0 (Level AAA)
1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
Success 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>