Summary

Ensure all form inputs and custom controls have labels that clearly describe their purpose.

Techniques

Examples

Example 1 — Associating a label

The for attribute is used to reference the ID of the element the label describes. Using the for attribute, the label can occur anywhere before or after the element.

<tr>
   <td>
      <input type="text" id="name"/>
   </td>
   <td>
      <label for="name">Full name</label>
   </td>
</tr>
Example 2 — Wrapping a label

The for attribute is omitted when the label can contain both the input/control and the label.

<label>
   <input type="text" id="name"/>
   Full name
</label>
Example 3 — Using fieldset for grouping

The legend element provides the label for the set of controls/inputs.

<fieldset>
   <legend>Accessibility Features</legend>
   <label>
      <input type="checkbox" name="a11yFeature"
         value="alternativeText"/> Alternative text
   </label>
   <label>
      <input type="checkbox" name="a11yFeature"
         value="longDescription"/> Extended descriptions
   </label>
   …
</fieldset>
Example 4 — Using aria-labelledby to identify names

The aria-labelledby attribute is used to reference the first input in a set of birth date fields as these inputs act as labels.

<fieldset>
   <legend>Birth Date</legend>
   <select id="y" aria-labelledby="yr">
      <input value="year" id="yr">Year</input>
      …
   <select>
   <select id="m" aria-labelledby="mo">
      <input value="month" id="mo">Month</input>
      …
   <select>
   <select id="d" aria-labelledby="day">
      <input value="day" id="day">Day</input>
      …
   <select>
</fieldset>
Example 5 — Multipart labels

The aria-labelledby attribute is used to reference both the address type and field name to avoid ambiguity.

<table>
   <tr>
      <td>
         <span id="shipping">Shipping Address</span>
      </td>
      <td>
         <span id="billing">Billing Address</span>
         <label>
            <input type="checkbox" id="bill-sameas" tabindex="8"/>
            Use shipping address for billing
         </label>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="str">Street</span>
         <input type="text" id="ship-street"
            aria-labelledby="shipping str" tabindex="1"/>
      </td>
      <td>
         <span class="label">Street</span>
         <input type="text" id="bill-street"
            aria-labelledby="billing str" tabindex="9"/>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="city">City</span>
         <input type="text" id="ship-city"
            aria-labelledby="shipping city" tabindex="2"/>
      </td>
      <td>
         <span class="label">City</span>
         <input type="text" id="bill-city"
            aria-labelledby="billing city" tabindex="10"/>
      </td>
   </tr>
   …
</table>
Example 6 — Adding invisible labels

The aria-label attribute is used to identify the parts of a phone number field as a visible label is not available for each part.

<fieldset>
   <legend>Phone Number</legend>
   <input type="text" id="country" aria-label="country code"/>
   <input type="text" id="area" aria-label="area code"/>
   <input type="text" id="local" aria-label="number"/>
</fieldset>

Explanation

Providing an accessible name for form inputs and custom scripted controls is essential for ensuring that users can understand their purpose. Assistive technologies compute the name for each control when a label is provided allowing users to quickly discover the purpose of each.

Due to the way that forms are laid out, however, users often reach input fields before the labels that describes them, or the labels may occur well before the field. If a label is not provided, the experience of interacting with dynamic content or filling out a form can be confusing.

HTML provides two native elements for associating labels with controls:

label

The label element is used to identify the accessible name for an individual control. It can either be wrapped around the control and its label (see Example 1) or a for attribute can be added that references the ID of the control (see Example 1).

fieldset

The fieldset element is used to group sets of related controls. A label can then be provided in a child legend element (see Example 3).

There are two drawbacks to these native methods: one is that they only accept a single label and the other is that the labels must be a visible part of the page and the text can be capture by the label element. The following ARIA attributes help solve these more complex cases:

aria-labelledby

The aria-labelledby attribute can be used to reference multiple elements. It is useful when more than one piece of information is necessary to give full context to a control (see Example 5). It can also be used to identify the label when it is not possible to use a label element (see Example 4).

aria-label

The aria-label attribute can be used when it is not possible to include a label by any other means (see Example 6). The value of the attribute is the label for the control.

Related Links