Web Accessibility Checker : Check Details

Element

input

Error Type

Potential

Guidelines

WCAG 2.0 (Level A)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.2 Labels or Instructions (A)
WCAG 2.0 (Level AA)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.2 Labels or Instructions (A)
WCAG 2.0 (Level AAA)
3.3 Input Assistance: Help users avoid and correct mistakes.
Success Criteria 3.3.2 Labels or Instructions (A)

Requirement

All input elements, type of "text", have a label that describes the purpose or function of the control.

Error

input element, type of "text", label may not describe the purpose or function of the control.

How To Determine

Question	Does the `input` element's label describe the purpose or function of the control?
PASS	`input` element's label describes the purpose or function of the control.
FAIL	`input` element's label does not describe the purpose or function of the control.

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "text".
2. The input element must have an explicitly associated label using one or more of the following methods.
3. The input element has an id attribute value that matches the for attribute value of a label element.
4. and/or
5. The input element has a title attribute.
6. and/or
7. The input element is contained by a label element.
8. Check if the label text describes the purpose or function of the control.

Expected Result

1. All input elements, type of "text", have a label that describes the purpose or function of the control.

Failed Result

1. Modify the label text so it describes the purpose or function of the control.

Examples

Pass Examples

Label using for and id describes 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 - Check #218 - Negative</title>
</head>
<body>
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="texta">Name:</label> 
<input id="texta" type="text" name="mytext" tabindex="1" />
</p>
</form>
</body>
</html>

Fail Examples

Label using for and id does not describe 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 - Check #218 - Positive</title>
</head>
<body>
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="texta">password</label> 
<input id="texta" type="text" name="mytext" tabindex="1" />
</p>
</form>
</body>
</html>