What This Rule Checks
In HTML, each element must have a unique ID. When multiple elements share the same ID, it creates confusion for browsers and assistive technologies, such as screen readers, as they rely on these unique IDs to properly associate ARIA attributes and labels.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
When multiple elements share the same ID, ARIA references (aria-labelledby, aria-describedby, aria-controls) always resolve to the first occurrence. This means subsequent form fields may announce the wrong label, creating critical confusion for screen reader users.
How to Fix
Assign Unique IDs to Each Element
Ensure that all elements in the document have unique IDs. IDs should never be reused within the same HTML document, particularly when those elements use ARIA attributes to interact with assistive technologies.
Code Examples
<!-- Duplicate IDs cause broken ARIA references -->
<label id="name-label">Name</label>
<input aria-labelledby="name-label">
<label id="name-label">Email</label> <!-- Duplicate ID! -->
<input aria-labelledby="name-label"> <!-- Points to wrong label -->
Copy
<!-- Unique IDs for correct ARIA references -->
<label id="name-label">Name</label>
<input aria-labelledby="name-label">
<label id="email-label">Email</label>
<input aria-labelledby="email-label">
Copy
Common Mistakes to Avoid
- Copy-pasting form fields without updating id values.
- Dynamically generating elements with template IDs that aren’t made unique.
- Not auditing IDs when merging components from different codebases.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value