What This Rule Checks
Duplicate id attribute values cause unpredictable behavior in browsers and assistive technologies. Labels, ARIA references, and fragment links may point to the wrong element, creating confusion for users who depend on these associations for navigation and interaction.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
Duplicate IDs cause browsers to resolve references unpredictably — labels may point to the wrong field, fragment links may scroll to the wrong position, and ARIA references may connect to the wrong element. This was a WCAG 4.1.1 violation (now deprecated in axe-core but still relevant).
How to Fix
Audit the page for duplicate id values and rename them to be unique. Update any associated label for attributes, ARIA references (aria-labelledby, aria-describedby), and anchor links to reference the correct unique id.
Code Examples
<!-- Duplicate ID values -->
<input
id="name"
type="text">
<label
id="name"
for="name">
Name
</label> <!-- Same ID! -->
Copy
<!-- Unique ID values -->
<label
id="name-label"
for="name-input">
Name
</label>
<input
id="name-input"
type="text">
Copy
Common Mistakes to Avoid
- Copy-pasting elements without updating ID values.
- Using template systems that generate duplicate IDs across repeated components.
- Not running ID uniqueness checks during development.
Related WCAG Criteria
- 4.1.1: Parsing