duplicate-id-aria
Web validation
id values referenced by labels or ARIA attributes must be unique.The id attribute lets browsers, scripts, and assistive technology map relationships, such as a label pointing to an input with for, or an ARIA reference like aria-labelledby, aria-describedby, or aria-controls. Each id used in any of these references must be unique.
When the same id value appears more than once, only the first match is reliably used. Later matches are ignored or mapped to the wrong element, which can give controls the wrong name and break scripted behavior.
Pass Patterns
Unique id values for every reference
Each id is used once, so the label and aria-labelledby references resolve to the right element.
<label for="email">Email address</label>
<input type="email" id="email" />
<div id="prefs-dialog" role="dialog" aria-labelledby="prefs-title">
<h2 id="prefs-title">Preferences</h2>
</div>Fail Patterns
Duplicate id on labeled inputs
Two inputs share the id that a label points to, so the association is ambiguous.
<label for="name">Full name</label>
<input type="text" id="name" />
<label for="nickname">Nickname</label>
<input type="text" id="name" />Duplicate id referenced by aria-labelledby
Two headings reuse the id named in aria-labelledby, so the dialog name is ambiguous.
<div id="dialog-a" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Settings</h2>
</div>
<div id="dialog-b" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Account</h2>
</div>WCAG techniques
Sufficient techniques
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- H44: Using label elements to associate text labels with form controls
- H91: Using HTML form controls and links
Failure techniques
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move focus to an element labeled through
fororaria-labelledby. - Listen to the announced name.
Expected results: The announced name matches the visible label.
Actual results: When the referenced id is duplicated, the announced name may be missing or wrong.
Inspecting the browser dev-tools
- Open dev tools and switch to the Elements or Accessibility panel.
- Select each element that uses an
aria-*reference or alabelforrelationship. - Check that the referenced
idappears exactly once in the DOM.
Expected results: Each relationship resolves to a single element.
Actual results: When the id appears more than once, the relationship is ambiguous.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires every component to expose the right name, role, state, and value. Duplicate id values undermine this because assistive technology can map only one element per id, so a referenced name or relationship may resolve to the wrong element.
Why is this issue marked as Critical?
When relationships like label to input or aria-labelledby to a heading fail, users may hear the wrong name or none at all, and scripted behavior tied to the id can stop working. This affects every assistive technology user and can break client-side code, so it needs prompt attention.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |