Techniques for WCAG 2.0

On this page:

-

# 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 determinable

## Applicability

HTML and XHTML controls that use visible labels

This failure relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 4.1.2 (Name, Role, Value)
  - How to Meet 4.1.2 (Name, Role, Value)
  - Understanding Success Criterion 4.1.2 (Name, Role, Value)

## Description

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 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">`)

## 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.

Example Code:

    <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 examples, the names associated with the text input controls are not properly determined by assistive technology.

Example Code:

    <form action="..." method="post">
    <p>
    <label>
       First Name
       <input type="text" name="firstname">
    </label>
    <label>
       <input type="text" name="lastname">
       Last Name
    </label>
    </p>
    </form>

Example Code:

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

Example Code:

    <input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

## Related Techniques

- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used

## Tests

### Procedure

For all `input` elements of type `radio`, `checkbox`, `text`, `file` or `password`, for all `textareas`, and for all `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 a label element associates the text with the input element

### Expected Results

- If check #1 is true and check #2 is false, then this failure condition applies and the content fails these Success Criteria.

- Top
- Contents
- Intro
- Previous: Failure F67
- Next: Failure F69