Element

textarea

Error Type

Potential

Guidelines

  • BITV 1.0 (Level 2)
    Guideline GroupLevel 1
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • WCAG 1.0 (Level AA)
    Guideline GroupPriority 2
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • WCAG 1.0 (Level AAA)
    Guideline GroupPriority 2
    Guideline Subgroup10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • 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 textarea elements have a label that is positioned close to control.

Error

textarea label is not positioned close to control.

Short Description

textarea element must have an associated label element that is positioned close to it.

How To Repair

Position the control's label so it is close to the control.

How To Determine

Question Does textarea element have an associated label close to it?
PASS Textarea element has a label close to it.
FAIL Textarea element does not have a label close to it.

Steps To Check

Procedure

1. Check all textarea elements in the document.

Expected Result

1. All textarea elements have a label that is positioned close to control.

Failed Result

1. Position the label close to the control.

Examples

Pass Examples

Label is close to textarea 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>Testfile - Check #96.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>comment:</td><td align="right"><textarea rows="3" cols="20" ></textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" /></td></tr>
</table>
</form>

</body>
</html>

Fail Examples

Label is not close to textarea 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>Testfile - Check #96.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>comment:</td><td align="right"><textarea rows="3" cols="20" ></textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="submit" ></td></tr>
</table>
</form>

</body>
</html>
Web site engine's code is copyright © 2023
Inclusive Design Institute