Web Accessibility Checker : Check Details

Element

select

Error Type

Known

Guidelines

BITV 1.0 (Level 2)
Level 1
12.4 Associate labels explicitly with their controls.
Section 508
N - accessible forms
WCAG 1.0 (Level AA)
Priority 2
12.4 Associate labels explicitly with their controls.
WCAG 1.0 (Level AAA)
Priority 2
12.4 Associate labels explicitly with their controls.
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 an explicitly associated label.

Error

select element missing an associated label.

Short Description

select element must have an associated label element. A label element is associated with the select element if the for attribute value of the label is the same as the id attribute of the select element.

How To Repair

Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.

Steps To Check

Procedure

1. Check all select elements in the content.
2. The select element must have an explicitly associated label using one or more of the following methods.
3. The select element has an id attribute value that matches the for attribute value of a label element.
4. and/or
5. The select element has a title attribute.
6. or
7. The select element is contained by a label element.

Expected Result

1. All select elements have an explicitly associated label.

Failed Result

1. Create a label element for the select element and associate these elements using the ID and for attributes.
2. and/or
3. Add a title attribute to the select element.
4. and/or
5. Add a label element that contains the select element.

Examples

Pass Examples

select element has an associated label using label element.

<?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 91.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

select element does not have associated label.

<?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 91.1 - Positive</title>
</head>
<body>
<form method="post" action="http://www.test.com">
<p>
<label>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>