Element

input

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 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>

English | German | Italiano


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