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