Web Accessibility Checker : Check Details

Element

input

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 input elements, type of "text", have a label that is positioned close to the control.

Error

input element label, type of "text", is not positioned close to control.

Short Description

input element with a type attribute value of "text" must have an associated label element positioned close to it.

How To Determine

Question	Is the label positioned close to the control?
PASS	Label is positioned close to the control.
FAIL	Label is not positioned close to the control.

Steps To Check

Procedure

1. Check all input elements that have a type attribute value of "text".
2. View the input element within the document and check the positioning of its label.

Expected Result

1. All input elements, type of "text", have a label that is positioned close to the control.

Failed Result

1. Position the label close to the control.

Examples

Pass Examples

Labels are positioned close to controls.

<?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>Testfile - Check #211.2 - Negative</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<table>
<tr><td>first name:</td><td><input type="text" /></td></tr>
<tr><td>last name:</td><td><input type="text" /></td></tr>
<tr><td>favorite color:</td><td><input type="text" /></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>

Fail Examples

Labels are positioned far from controls.

<?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>Testfile - Check #211.1 - Positive</title>
</head>
<body>
<form action="http://www.example.com" method="post">
<table width="100%">
<tr><td>first name:</td><td align="right"><input type="text" /></td></tr>
<tr><td>last name:</td><td align="right"><input type="text" /></td></tr>
<tr><td>favorite color:</td><td align="right"><input type="text" /></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>