# Form field must not have multiple label elements

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/form-field-multiple-labels
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When a form field has more than one `<label>` element pointing to it (either via the `for` attribute or by nesting), assistive technologies have no reliable way to determine which label is the correct one. This inconsistency means that users who are blind, have low vision, or are deafblind may hear the wrong label, an incomplete label, or a confusing combination of labels when interacting with a form. Users with mobility impairments also benefit from properly associated labels, since a single clear `<label>` expands the clickable area of the associated input.

This rule relates to **WCAG 2.0, 2.1, and 2.2 Success Criterion 3.3.2: Labels or Instructions (Level A)**, which requires that labels or instructions are provided when content requires user input. Multiple conflicting labels undermine this requirement because the user cannot reliably receive a single, clear label for the field.

## How to Fix

Ensure that each form field has only **one** `<label>` element associated with it. You can associate a label with a field in one of two ways — but use only one label per field:

1. **Explicit association** — Use the `for` attribute on the `<label>` matching the `id` of the input.
2. **Implicit association** — Wrap the input inside the `<label>` element.

If you need to provide additional descriptive text beyond the label, use `aria-describedby` to point to supplementary instructions rather than adding a second `<label>`.

If you have a situation where one label must be visually hidden, hide the redundant label using CSS (`display: none` or `visibility: hidden`) so it is fully removed from the accessibility tree, **and** remove its `for` attribute. Using `aria-hidden="true"` alone on a `<label>` is not sufficient to prevent all screen readers from associating it with the field.

## Examples

### Incorrect: Two explicit labels for one input

Both `<label>` elements use `for="username"`, causing unpredictable screen reader behavior.

```html
<label for="username">Username</label>
<label for="username">Enter your username</label>
<input type="text" id="username" />
```

### Incorrect: One explicit and one implicit label

The input is both wrapped in a `<label>` and referenced by another `<label>` via `for`.

```html
<label for="email">Email</label>
<label>
  Email address:
  <input type="text" id="email" />
</label>
```

### Incorrect: Nested labels

Labels should never be nested inside each other.

```html
<label>
  Enter your comments:
  <label>
    Comments:
    <textarea id="comments"></textarea>
  </label>
</label>
```

### Correct: Single explicit label

One `<label>` with a `for` attribute matching the input's `id`.

```html
<label for="username">Username</label>
<input type="text" id="username" />
```

### Correct: Single implicit label

The input is wrapped inside a single `<label>`.

```html
<label>
  Email address:
  <input type="text" id="email" />
</label>
```

### Correct: Label with supplementary instructions using `aria-describedby`

When you need to provide extra guidance beyond the label, use `aria-describedby` instead of a second label.

```html
<label for="password">Password</label>
<input type="password" id="password" aria-describedby="password-hint" />
<p id="password-hint">Must be at least 8 characters with one number.</p>
```

### Correct: Using the `title` attribute as a label

When a visible label is not appropriate (rare cases), the `title` attribute can serve as an accessible name.

```html
<textarea id="search" title="Search terms"></textarea>
```

### Correct: Select inside a single label

```html
<label>
  Choose an option:
  <select id="options">
    <option selected>Option A</option>
    <option>Option B</option>
  </select>
</label>
```