The problem

If text labels are not correctly associated with their relevant form controls, assistive technology users may not hear these text labels announced as they navigate through forms. Text labels should be programmatically associated with their form controls.

Test criteria

1. Is the text label announced when the form control recieves focus?

Test cases

Example 1: No label

<div class="input">
  <span class="input__label">Example 1</span>
  <input class="input__control" type="text">
</div>

Example 2: Wrapping control inside label

<div class="input">
  <label>
    <span class="input__label">Example 2</span>
    <input class="input__control" type="text">
  </label>
</div>

Example 3: Using for & id attributes

<div class="input">
  <label class="input__label" for="example03">Example 3</label>
  <input class="input__control" type="text" id="example03">
</div>

Example 4: Using the aria-labelledby attribute

<div class="input">
  <span class="input__label" aria-labelledby="example04">Example 4</span>
  <input class="input__control" type="text" id="example04">
</div>

Example 5: Using the title attribute

<div class="input">
  <span class="input__label">Example 5</span>
  <input class="input__control" type="text" title="Example 5">
</div>

Test results

Recommendations

Text labels should always be programmatically associated with their relevant form controls using the label element and matching for and id atrributes.

Example 3: Using for & id attributes is the recommended solution.

Even though Example 2: Wrapping control inside label passes most tests, the text label is not programmatically associated with its form control and is therefore not recommended.

Related WCAG references

Success Criterion

• 1.3.1 Info and Relationships

Sufficient techniques

• H44: Using label elements to associate text labels with form controls
• ARIA16: Using aria-labelledby to provide a name for user interface controls
• G115: Using semantic elements to mark up structure
• H65: Using the title attribute to identify form controls when the label element cannot be used