Names, roles & states

Two Interactive Elements Share the Same ID

When two buttons, links or fields share an ID, labels and scripts may attach to the wrong one, so a control can lose its name or stop working.

duplicate-id-active

Status: ModerateModerate — An annoyance, with a workaround.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.

Why it matters

An id is meant to be a unique name for one element on the page. Labels, scripts and ARIA references use it to find that element.

If two interactive elements share an id, the browser usually picks the first one. The second field can end up with no label, or a button can do nothing when pressed.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They reach a field and hear only "edit text", or hear a label that belongs to a different field.	High impact
Low-vision users (magnification)	Mostly fine unless they also use a screen reader, as many do.	Partial impact
Keyboard-only users	A button that relies on a script by ID may do nothing when they press Enter.	Partial impact
Cognitive and neurodivergent users	A control that does nothing, or a cursor that jumps elsewhere, is confusing.	Partial impact
Voice control users	Saying a field's label can move them to the other copy, not the one they wanted.	Partial impact
Motor and dexterity	Clicking a field's label may put the cursor in a different field, which is harder to recover from.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	This was part of WCAG 4.1.1, which WCAG 2.2 removed. It is now a best practice, but the broken labels it causes can still fail Level AA under Australia's Disability Discrimination Act.	Moderate impact
Conversion	A sign-up or checkout field with no label, or a button that does nothing, stops people finishing.	Moderate impact
SEO	Search engines don't reward unique IDs. No real benefit.	Low impact
Cost to fix	Usually a quick rename. Components that are reused on one page should generate their own IDs.	High impact

Fixing it in code

The same sign-up form in the header and footer

Don't

<label for="email">Email</label>
<input id="email" type="email">
<!-- later on the page -->
<label for="email">Email</label>
<input id="email" type="email">

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

<label for="email-header">Email</label>
<input id="email-header" type="email">
<!-- later on the page -->
<label for="email-footer">Email</label>
<input id="email-footer" type="email">

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

Each label now points to its own field.

Two buttons wired up by ID

Don't

<button id="show-more">Show more reviews</button>
<button id="show-more">Show more questions</button>

A screen reader says: “"Show more questions, button" — but pressing it does nothing”

<button id="show-more-reviews">Show more reviews</button>
<button id="show-more-questions">Show more questions</button>

A screen reader says: “"Show more questions, button" — and it works”

A script looking up each ID now finds the right button.

Designer's handoff note

When a component like a search box or sign-up form appears twice on one 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 form or button that appears more than once on the page.
Step 2: Press ⌘ F5 to turn VoiceOver on.
Step 3: Press Tab to reach the second copy and listen.
Step 4: Press Enter or Space on any repeated button.

Pass: Each copy announces its own label, and each button does its job.
Fail: A copy says only "edit text", reads the wrong label, or does nothing when pressed.

Check these at the same time

A button has no name a screen reader can say button-name
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 the repeated ID. It can't tell whether a label, script or reference actually broke — for that, use the page with a keyboard and a screen reader.

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-active
Raised by: axe-core: “IDs of active elements must be unique”
WCAG: Best practice — not a WCAG requirement
Read more: Deque University: duplicate-id-active (opens in a new tab)
Last reviewed: 16 October 2026