Add explicit labels to form controls |
WAI / WCAG 1.0 Priority 2 checkpoint 12.4
Issue Description The page contains a form whose controls are not explicitly linked to LABEL elements.
How to fix There are three steps for associating a label to a control:

1. assign a unique identifier to the control using the ID attribute;
2. create a LABEL element containing the text or image label to associate to the control;
3. add the FOR attribute to the LABEL element with the control's ID as value.

Example:

    <form action="submit" method="post">
       <label for="firstname">First name: </label>
       <input type="text" id="firstname">
       <label for="lastname">Last name: </label>
       <input type="text" id="lastname">
    </form>

Issue Explanation When navigating through a form using the tab key, a visually enabled user can easily associate the controls with the labels that are placed near them. For a screen reader user, however, this information is not enough. It is necessary to explicitly specify which label is linked to which form control.

The best way to achieve this is provided by the LABEL element. LABEL must contain the actual text labeling, the form control, and its attribute FOR must contain the ID of the control.

One LABEL can point only to one control, or more than one LABEL can point to the same control. This feature is not yet implemented by all screen readers, so it is recommended to assign only one LABEL to each control.

It is possible to implicitly associate a label to a control: insert both the label and the control as contents of the LABEL element. While this technique is suggested by HTML 4.01 Recommendation, it is not supported by all screen readers yet.