Rampsight

All rules

Forms

One field, one label

Why it matters

When several <label> elements point at the same field, browsers and screen readers disagree about which one to announce — some read the first, some the last, some concatenate.

How to fix it

  1. Merge the wording into a single <label>.
  2. Move hints and error text into a separate element referenced with aria-describedby.
  3. Keep the required marker inside the one label rather than in a second one.

In markup

Fails
<label for="email">Email</label>
<label for="email">Required</label>
<input id="email">
Passes
<label for="email">Email (required)</label>
<input id="email" required>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on form-field-multiple-labels (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.