Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name

Important Information about Techniques

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.

Applicability

HTML controls

This failure relates to:

Description

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 label, title, aria-label, or aria-labelledby.

Note 1: Elements that can use an explicitly-associated label element are:

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):

Examples

Failure Example 1:

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>

Failure Example 2:

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>

Failure Example 3:

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

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all input, textarea and select elements in the Web page (except inputs of type "hidden", "submit", "reset", or "button":

  1. Check that each element has a programmatically determined name using one of the following ways:

    1. the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).

    2. the control is programmatically determined through the value of its aria-label attribute.

    3. 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).

    4. the control is contained within a label element that also contains the label text.

    5. the control is an input of type "image" and the alt attribute provides a text label.

    6. the control is programmatically determined through the value of title attribute.

Expected Results