Names, roles & states

Two Elements Share an ID That Labels or Descriptions Point To

When a label points to an ID used twice, screen readers read the wrong label or hint — so people fill in the wrong field.

duplicate-id-ariaWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: CriticalCritical — Someone can complete the task only with great difficulty or outside help.CurrentScanners run this rule today.
Owner: DevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Save as PDF

Why it matters

Labels, hints and error messages are often linked to a field by its id. The link uses for, aria-labelledby or aria-describedby.

If two elements share that id, the browser uses the first one only. The second field gets the wrong name, or none, and its error message may never be read.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear the wrong label or hint, like "Email" on a phone field, or no error at all.	High impact
Voice control users	Saying the field's visible name may select a different field, or nothing.	High impact
Low-vision users (magnification)	Affected if they use a screen reader; clicking a label may also move focus to the wrong field.	Partial impact
Cognitive and neurodivergent users	When the spoken label doesn't match the screen, it's confusing and errors follow.	Partial impact
Motor and dexterity	Clicking a label to reach a small checkbox may tick the wrong one.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	Linked to WCAG 4.1.2 Name, Role, Value at Level A, and EN 301 549. Complaints under Australia's Disability Discrimination Act point to WCAG 2.2 AA.	High impact
Conversion	Wrongly labelled checkout or sign-up fields cause wrong entries and abandoned forms.	High impact
SEO	No real search benefit — don't sell it as one.	Low impact
Brand trust	A form that reads the wrong labels feels broken, and people say so.	Moderate impact
Cost to fix	Usually caused by a reused component. Generate unique IDs there once and it's fixed everywhere.	High impact

Fixing it in code

Two address blocks on one page

Don't

<label for="street">Billing street</label>
<input id="street">
<label for="street">Delivery street</label>
<input id="street">

A screen reader says: “Second field: "edit text" with no name, or "Billing street, edit text"”

<label for="billing-street">Billing street</label>
<input id="billing-street">
<label for="delivery-street">Delivery street</label>
<input id="delivery-street">

A screen reader says: “Second field: "Delivery street, edit text"”

Each label now points to one field only.

A reused field component with an error message

Don't

function Field({ label }) {
  return (<>
    <label htmlFor="field">{label}</label>
    <input id="field" aria-describedby="error" />
    <p id="error">Required</p>
  </>);
}

A screen reader says: “Every field reads the first field's label and error”

function Field({ label }) {
  const id = useId();
  return (<>
    <label htmlFor={id}>{label}</label>
    <input id={id} aria-describedby={id + '-error'} />
    <p id={id + '-error'}>Required</p>
  </>);
}

A screen reader says: “Each field reads its own label and its own error”

useId gives every copy of the component its own IDs.

Designer's handoff note

When a design repeats a block, like two addresses or a list of cards, flag it for developers. Each copy needs its own labels and hints.

Quick test

Tool

NVDA (opens in a new tab) (free on Windows) or VoiceOver (opens in a new tab)

Checklist

Step 1: Turn the screen reader on.
Step 2: Press Tab through a form with repeated sections.
Step 3: Listen to each field's name and hint, and compare it with the screen.

Pass: Every field reads its own visible label and its own hint or error.
Fail: A field reads another field's label, or reads no name at all.

Check these at the same time

A custom input field has no name aria-input-field-name
A form field has no label label

What a green scan still misses

A scanner finds the shared ID reliably. It can't tell whether each label's wording is right for its field — for that, listen.

Reference

Rule ID: duplicate-id-aria
Raised by: axe-core: “IDs used in ARIA and labels must be unique”
WCAG: 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
Other standards: EN 301 549 9.4.1.2 · RGAA 8.2.1
Read more: Deque University: duplicate-id-aria (opens in a new tab)
Last reviewed: 14 October 2026