Names, roles & states

Two or More Elements Share the Same Id

When ids repeat, labels and descriptions can attach to the wrong element, so a screen reader may read out a field with no name or the wrong one.

duplicate-id

Status: MinorMinor — Cosmetic, or best practice.Retiredaxe-core no longer runs this rule. Its card says why, and what still applies.
Owner: DevTest
Audit: AutomatedA scanner finds it, and a clean scan means it's fixed.

Retired rule. Retired in axe-core because WCAG 2.2 removed 4.1.1 Parsing, the criterion it checked. Duplicate IDs still break things when a label, aria-labelledby or aria-describedby points at one — duplicate-id-aria still checks that.

Save as PDF

Why it matters

An id is meant to be a unique name for one element on the page. Labels, error messages and some ARIA attributes use it to point at that element.

If two elements share an id, the browser usually picks the first one. The second field can lose its label, or another field's message gets read out. Often nothing goes wrong, which is why this is now a best practice rather than a requirement.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	If a repeated id is used by a label, they may hear "edit text" with no name, or the wrong field's name.	Partial impact
Low-vision users (magnification)	Affected only if they also use a screen reader; the page looks the same.	Partial impact
Cognitive and neurodivergent users	If clicking a label moves them to a different field, it is confusing.	Partial impact
Voice control users	If a field loses its label, they can't say its name to move to it.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	WCAG 2.2 removed the old parsing rule, so this alone isn't a Level AA failure. Real harm, like a missing label, is judged under other criteria.	Low impact
Conversion	A sign-up or checkout field with the wrong label can stop someone finishing.	Moderate impact
SEO	No search benefit — don't sell it as one.	Low impact
Brand trust	Few people notice unless a label breaks.	Low impact
Cost to fix	Cheap to fix. Repeated ids usually come from one reused component, so fix it once there.	Moderate impact

Fixing it in code

Two email fields on one page

Don't

<label for="email">Newsletter email</label>
<input id="email" type="email">
...
<label for="email">Login email</label>
<input id="email" type="email">

A screen reader says: “Second field: "edit text" (no name)”

<label for="news-email">Newsletter email</label>
<input id="news-email" type="email">
...
<label for="login-email">Login email</label>
<input id="login-email" type="email">

A screen reader says: “Second field: "Login email, edit text"”

Each label now points to its own field.

A reused component

Don't

function Field({ label }) {
  return (<>
    <label htmlFor="field">{label}</label>
    <input id="field" />
  </>);
}

A screen reader says: “Every field after the first: "edit text"”

function Field({ label }) {
  const id = useId();
  return (<>
    <label htmlFor={id}>{label}</label>
    <input id={id} />
  </>);
}

A screen reader says: “Each field reads its own label, like "Suburb, edit text"”

useId gives every copy a unique id.

Designer's handoff note

No visual change is needed. When a component appears more than once on a page, flag it so developers give each copy its own id.

Quick test

Tool

VoiceOver (opens in a new tab) (on every Mac)

Duration

2 min

Checklist

Step 1: Find a page where a form or component appears twice.
Step 2: Press ⌘ F5 to turn VoiceOver on.
Step 3: Press Tab through every field, including the second copy.
Step 4: Listen to each field's name.

Pass: Every field reads out its own correct label.
Fail: A field reads no name, or another field's label.

Check these at the same time

An ARIA attribute has a value that isn't allowed aria-valid-attr-value
Two elements share an ID that labels or descriptions point to duplicate-id-aria
A form field has no label label

What a green scan still misses

A scanner finds repeated ids. It can't tell whether anything actually breaks — listen to the fields that use those ids.

Reference

Status: RetiredRetired in axe-core because WCAG 2.2 removed 4.1.1 Parsing, the criterion it checked. Duplicate IDs still break things when a label, aria-labelledby or aria-describedby points at one — duplicate-id-aria still checks that.
Rule ID: duplicate-id
Raised by: axe-core: “id attribute value must be unique”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: duplicate-id (opens in a new tab)
Last reviewed: 16 October 2026