See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
HTML and XHTML controls that use external labels
This technique relates to:
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.
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"
.
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">
)
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 Code:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
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 are for information purposes only, no endorsement implied.
For all input
elements of type text
, file
or
password
, for all textareas
and for all
select
elements in the Web page:
Check that there is a label
element that identifies the purpose of
the control before the input
, textarea
, or select
element
Check that the for
attribute of the label
element
matches the id of the input
, textarea
, or select
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 the input
element
Check that the for
attribute of the label
element
matches the id
of the input
element
Check that the label
element is visible.
Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.