This technique relates to Success Criterion 4.1.2: Name, Role, Value (Failure).
This failure describes a problem that occurs when a form control does not have a name
exposed to assistive technologies. The result is that some users will not be able
to identify the purpose of the form control. The name can be provided in multiple
ways, including the
label element. Other options include use of the
title attribute and
aria-label which are used to directly provide text that is used for the accessibility name or
aria-labelledby which indicates an association with other text on a page that is providing the name.
Button controls can have a name assigned in other ways, as indicated below, but in
certain situations may require use of
Elements that can use an explicitly-associated
label element are:
label element is not used for the following because labels for these elements are provided
value attribute (for Submit and Reset buttons), the
alt attribute (for image buttons), or element content itself (
- Submit and Reset buttons (input type="submit" or input type="reset")
- Image buttons (input type="image")
- Hidden input fields (input type="hidden")
- 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
<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 in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">
Resources are for information purposes only, no endorsement implied.
select elements in the Web page (except inputs of type
Check that each element has a programmatically determined name using one of the following ways:
- the text label or labels are programmatically associated with the control element
aria-labelledbyattribute (each id given as a value in the
aria-labelledbyattribute matches the
idof the text label element).
- the control is programmatically determined through the value of its
- the text label is contained in a
labelelement that is correctly associated to the respective
inputelement via the label's
idgiven as value in the
forattribute matches the
idof the input element).
- the control is contained within a
labelelement that also contains the label text.
- the control is an
altattribute provides a text label.
- the control is programmatically determined through the value of
- the text label or labels are programmatically associated with the control element via the
- If all options of check #1 are false, then this failure condition applies and the content fails the Success Criteria.