Technique H44:Using label elements to associate text labels with form controls
Applicability
HTML controls that use external labels
This technique relates to:
- 1.1.1: Non-text Content (Sufficient)
- 1.3.1: Info and Relationships (Sufficient when used with Making information and relationships conveyed through presentation programmatically determinable using the following techniques: )
- 3.3.2: Labels or Instructions (Sufficient)
- 4.1.2: Name, Role, Value (Sufficient when used with G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes)
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 (Non-Text Content), 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) whether or not the label
element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2 (Labels or Instructions), the label
element must be visible since it provides assistance to all users who need help understanding
the purpose of the field.
An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.
Note that the label
is positioned after input
elements of type="checkbox"
and type="radio"
.
Elements that use explicitly associated labels are:
- inputs for text entry:
input type="date"
input type="datetime-local"
input type="email"
input type="month"
input type="number"
input type="password"
input type="search"
input type="tel"
input type="text"
input type="time"
input type="url"
input type="week"
-
input type="checkbox"
-
input type="color"
-
input type="file"
-
input type="radio"
-
input type="range"
-
select
-
textarea
The label
element is not used for the following elements:
button
(the label is provided by the content)input type="button"
(the label is provided by the content)input type="hidden"
input type="image"
(the label is provided by thealt
attribute)input type="reset"
(the label is label provided by thevalue
attribute)input type="submit"
(the label is label provided by thevalue
attribute)
Examples
Example 1: A text input field
The text field in this example has the explicit label of "First name:". The label
element's for
attribute matches the id
attribute of the input
element.
<label for="firstname">First name:</label> <input id="firstname" name="firstname" type="text">
Example 2: A checkbox
<input checked id="markuplang" name="computerskills" type="checkbox"> <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.
<h1>Doughnut Selection</h1> <form action="/buy-doughnuts" method="post"> <fieldset> <legend>Pick the doughnut you would like</legend> <input id="dn-choc" name="flavor" type="radio" value="chocolate"> <label for="dn-choc">Chocolate</label> <input id="dn-cream" name="flavor" type="radio" value="cream"> <label for="dn-cream">Cream Filled</label> <input id="dn-raspberry" name="flavor" type="radio" value="raspberry"> <label for="dn-raspberry">Raspberry Filled</label> </fieldset> <input type="submit" value="Purchase Your Doughnut"> </form>
Other sources
No endorsement implied.
Tests
Procedure
For all input
elements of type text
, file
oder password
, for all textarea
elements, and for all select
elements in the Web page:
- Check that there is a
label
element that identifies the purpose of the control before theinput
,textarea
, orselect
element - Check that the
for
attribute of thelabel
element matches theid
of theinput
,textarea
, orselect
element. - Check that the
label
element is visible.
For all input
elements of type checkbox or radio in the Web page:
- Check that there is a
label
element that identifies the purpose of the control after theinput
element. - Check that the
for
attribute of thelabel
element matches theid
of theinput
element. - Check that the
label
element is visible.
Expected Results
- Checks 1 and 2 are true.
- For Success Criterion 3.3.2 (Labels or Instructions), Check 3 is also true.