Techniques for WCAG 2.0

On this page:

-

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

## Applicability

HTML and XHTML controls that use external labels

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

## 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>`).

- JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.

- Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.

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

- JAWS 6.0 and later can be set to speak both `label` and `title` when the two items are different; however, very few users are aware of this setting.

- WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with 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:

- `input type="text"`

- `input type="checkbox"`

- `input type="radio"`

- `input type="file"`

- `input type="password"`

- `textarea`

- `select`

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

- Submit and Reset buttons (`input type="submit"` or `input type="reset"`)

- Image buttons (`input type="image"`)

- Hidden input fields (`input type="hidden"`)

- Script buttons (`button` elements or `<input type="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.

- HTML 4.01 form labels

- Accessible Forms using WCAG 2.0

## Related Techniques

- G167: Using an adjacent button to label the purpose of a field
- H65: Using the title attribute to identify form controls when the label element cannot be used
- H71: Providing a description for groups of form controls using fieldset and legend elements

## 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` 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.

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

- Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.

- Top
- Contents
- Intro
- Previous: Technique H43
- Next: Technique H45