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 visible labels
This failure relates to:
This failure describes a problem that occurs when no label
element is used to explicitly associate a form control with a label where the visual design uses a label.
Note 1:
Elements that can use an explicitly-associated label
element are:
input
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 following example demonstrates a form that visually presents labels for form controls, but does not use the label
element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.
<form>
First name:
<input type="text" name="firstname">
<br />
Last name:
<input type="text" name="lastname">
<br />
I have a dog <input type="checkbox" name="pet" value="dog" />
I have a cat <input type="checkbox" name="pet" value="cat" />
</form>
In the following code example, label
elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.
<form action="..." method="post">
<p>
<label>First Name</label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>
The search text box does in the following code example not have a name. The name can be supplied with either the title attribute or with a label element hidden with CSS.
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">
For all input
elements of type "radio", "checkbox", "text", "file" or "password", and all textarea
and select
elements in the Web page:
Check that the visual design uses a text label that identifies the purpose of the control
Check that these input elements have a programmatically determined label associated in one of the following ways:
the text label is contained in a label
element that is correctly associated to the respective input
element via the label's for
attribute (the id
given as value in the for
attribute matches the id
of the input element).
the control is contained within a label
element that contains the label text.
the text label is correctly programmatically associated with the input
element via the aria-labelledby
attribute (the id
given as value in the aria-labelledby
attribute matches the id
of the input element).
the input
element is programmatically determined through the value of either its aria-label
or title
attributes.
If check #1 is true and all options of check #2 are false, then this failure condition applies and the content fails these Success Criteria.