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>
<input type="text" name="name" id="name">
<br>
<label for="email">email:</label>
<input type="text" name="email" id="email">
</form>

</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.4

Referring UWEM Test

12.4_HTML_02

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

    Bad example:
    <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>
    Good example:
    <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>