Techniques for WCAG 2.0

Skip to Content (Press Enter)


F68: Failure of Success Criterion 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically determined


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:

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


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.

 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" />

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"> 
<label>First Name</label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 

Failure Example 3:

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:

  1. Check that the visual design uses a text label that identifies the purpose of the control

  2. Check that these input elements have a programmatically determined label associated in one of the following ways:

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

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

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

    4. the input element is programmatically determined through the value of either its aria-label or title attributes.

Expected Results

Techniques are Informative

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.