Forms Rule

A form field should have one label, not several form-field-multiple-labels

When two or more label elements have a for attribute pointing at the same field, screen readers have to pick. Some read the first, some the last, some both joined together. The person hears a different name depending on their software. Keep one label per field and put any extra hint in a separate element linked with aria-describedby.

WCAG 2.2 A 3.3.2 Labels or Instructions

Websight reports this as Form field must not have multiple label elements

Who it affects

A patient using JAWS to book a clinic appointment hears Date of birth for the field, while a friend on VoiceOver hears Format: DD MM YYYY for the same field. One of them does not know what the field is.

Someone using voice control says click date of birth and the software may not recognise the field, because its computed name is the other label.

Someone who clicks labels to focus fields clicks the hint text and jumps into a field, which is fine, until the hint and the label disagree about what the field is.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Two labels, one field. One screen reader announces Date of birth; another announces For example 31 3 1985; a third reads both run together.

Fixed

Announced the same way everywhere: Date of birth, edit text, For example 31 3 1985. Name first, hint after.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}label{display:block;font-size:14px}.hint{color:#555;font-size:13px;margin-bottom:4px}input{display:block;padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;width:180px}</style>
<h2 style="font-size:17px;margin:0 0 10px">Book an appointment</h2>
<label for="dob">Date of birth</label>
<label for="dob" class="hint">For example 31 3 1985</label>
<input id="dob" type="text">
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}label{display:block;font-size:14px}.hint{color:#555;font-size:13px;margin-bottom:4px}input{display:block;padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;width:180px}</style>
<h2 style="font-size:17px;margin:0 0 10px">Book an appointment</h2>
<label for="dob">Date of birth</label>
<p id="dob-hint" class="hint">For example 31 3 1985</p>
<input id="dob" type="text" aria-describedby="dob-hint">

Test it by hand in two minutes

  1. Right click the field and choose Inspect. Note its id, then search the Elements panel for for="that-id". There should be exactly one match.
  2. Click each piece of text near the field. If more than one piece moves the cursor into the field, more than one label is attached.
  3. Turn on VoiceOver (Cmd+F5) or NVDA and Tab to the field. Write down what is announced. If you can, try a second screen reader and compare; the name should be the same.
  4. Check that any hint text is still read after the name, via aria-describedby, rather than lost in the merge.

The fix

Before
<label for="dob">Date of birth</label>
<label for="dob">For example 31 3 1985</label>
<input id="dob" type="text">
After
<label for="dob">Date of birth</label>
<p id="dob-hint">For example 31 3 1985</p>
<input id="dob" type="text" aria-describedby="dob-hint">

The label is the name; aria-describedby adds the hint afterwards. This is the pattern most design systems use for hint text.

Merge into one label

Before
<label for="ref">Reference</label>
<label for="ref">number</label>
<input id="ref">
After
<label for="ref">Reference number</label>
<input id="ref">

If both labels are really one phrase split for layout, join them and style the pieces with span elements inside the single label.

Copy and paste left-over

Before
<label for="email">Email</label>
<input id="email" type="email">
<label for="email">Phone</label>
<input id="phone" type="tel">
After
<label for="email">Email</label>
<input id="email" type="email">
<label for="phone">Phone</label>
<input id="phone" type="tel">

Often the second label is a typo in the for attribute. Fix the id and both fields get the right name.

Common mistakes

  • Using a second label element for hint or error text because it styles nicely.
  • Copying a field and forgetting to change the for attribute on its label.
  • Hiding one of the two labels with CSS; it still counts as a label to assistive technology.
  • Adding aria-label on top of two labels, which gives the field a third candidate name.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can count how many label elements point at the same field. It cannot tell which one you meant, so it flags the field and leaves the choice to you. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Form fields must have labels label Every input and textarea needs a label that is programmatically tied to it, not just sitting nearby. A Select menus must have an accessible name select-name A select element is a drop-down list of choices. A ARIA input fields must have an accessible name aria-input-field-name When a div or span is given a form role such as textbox, combobox, listbox, slider or spinbutton, assistive technology treats it as a field. A ids used by ARIA and labels must be unique duplicate-id-aria aria-labelledby, aria-describedby, aria-controls and the label for attribute all work by id.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.