Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

H44: Using label elements to associate text labels with form controls

Applicability

HTML and XHTML controls that use external labels

This technique relates to:

User Agent and Assistive Technology Support Notes

The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, <label>First name <input type="text" name="firstname"></label>).

User agents will display a tool tip when the mouse hovers above an input element containing a title attribute. Title attributes are exposed to assistive technology and are displayed as tooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.

If no label is available, JAWS and Window-Eyes speak the title attribute when the form control receives focus

Description

The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.

The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page.

This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.

Note that the label is positioned after input elements of type="checkbox" and type="radio".

Note 1: Elements that use explicitly associated labels are:

Note 2: The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).

Examples

Example 1: A text input field

The text field in the example below has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.

Example Code:

<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />

Example 2: A checkbox

Example Code:

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

Example 3: A group of radio buttons

A small, related group of radio buttons with a clear description and labels for each individual element.

Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.

Example Code:

 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:

  1. Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element

  2. Check that the for attribute of the label element matches the id of the input, textarea, or select element

  3. Check that the label element is visible.

For all input elements of type checkbox or radio in the Web page::

  1. Check that there is a label element that identifies the purpose of the control after the input element

  2. Check that the for attribute of the label element matches the id of the input element

  3. Check that the label element is visible.

Expected Results