Check a Page
Corresponding label for form control element
(Referring UWEM Test: 12.4_HTML_02)Test info
Failure cause
Found form control element without corresponding label.
There is no label with a for attribute corresponding to the id of the inspected form control element.
Why this may be a barrier
Labels are used to name form control elements, e.g. "first name" could be the label for a form element which could be a text entry field.
To be identifiable all form controls must have explicitly associated labels.
Good Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: form controls with missing LABEL</title></head>
<body><form><label for="name">name:</label></form>
<input type="text" name="name" id="name">
<br>
<label for="email">email:</label>
<input type="text" name="email" id="email"></body>
</html>
Solution
Use the label element to specify labels for controls that do not have implicit labels. Also see W3: Labels
References
Related WCAG 1.0 Checkpoint
12.4"Associate labels explicitly with their controls." [Priority 2]
WCAG 1.0 Checkpoint 12.4Referring UWEM Test
12.4_HTML_02This test is targeted to find form control elements without label element, or with label elements that do not refer to an existing id.
Examples
-
Labelling form elements
In the bad example, there is no logical correlation between the input fields and their descriptions, because the descriptions are not defined as corresponding labels.
<body><form action="evalForm.php" method="post">
Email:<input type="text" size="30" name="email" id="email" /><br />
Receive updates:
<input type="checkbox" name="updates" id="updates" /><br />
<input type="submit" value="Send" />
</form></body>
<body><form action="evalForm.php" method="post">
<label for="email">Email:</label><input type="text" size="30" name="email" id="email" /><br />
<label for="updates">Receive updates:</label>
<input type="checkbox" name="updates" id="updates" /><br />
<input type="submit" value="Send" />
</form></body>
