Summary
Ensure all form inputs and custom controls have labels that clearly describe their purpose.
Techniques
-
Label form inputs. [[WCAG-3.3.2]]
-
Provide instructions for expected values. [[WCAG-3.3.2]]
-
Provide labels for individual controls. [[WCAG-4.1.2]]
-
Provide labels for groups of controls. [[WCAG-4.1.2]]
Examples
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>
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>
fieldset
for groupingThe 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>
aria-labelledby
to identify namesThe 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>
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>
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 afor
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 childlegend
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 alabel
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
- HTML — The
label
element - HTML — The
fieldset
element - ARIA — aria-label (property)
- ARIA — aria-labelledby (property)