← All rules

Markup

Ids used by ARIA must be unique

• Rule: duplicate-id-aria
• Severity: Critical
• WCAG level A

Why it matters

aria-labelledby resolves to the first element with that id. If two elements share it, half your controls quietly get the wrong name.

How to fix it

1. Make every id referenced from ARIA unique on the page.
2. Generate ids per component instance rather than hard-coding them in a template that repeats.
3. Check lists and repeated form rows first — that is where duplicates come from.

In markup

<span id="label">Street</span>
<span id="label">City</span>
<input aria-labelledby="label">

<span id="street-label">Street</span>
<span id="city-label">City</span>
<input aria-labelledby="street-label">

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:

• 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A

Further reading

Deque University on duplicate-id-aria (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.