What This Rule Checks
When multiple active (focusable) elements share the same id, browsers and assistive technologies may only recognize the first instance. This can make form controls, buttons, or links inaccessible, as labels and ARIA relationships break for the duplicates.
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.
Why This Matters
Duplicate IDs on active (focusable) elements cause label and ARIA associations to break for all but the first element. Screen readers may announce the wrong label for a button, and programmatic focus management via getElementById returns only the first match.
How to Fix
Assign unique id values to all focusable elements such as inputs, buttons, and links. Check that label for attributes and ARIA references point to the correct unique id after renaming.
Code Examples
<!-- Duplicate IDs on focusable elements -->
<button id="submit">
Save Draft
</button>
<button id="submit">
Publish
</button> <!-- Same ID! -->
Copy
<!-- Unique IDs on focusable elements -->
<button id="save-draft">
Save Draft
</button>
<button id="publish">
Publish
</button>
Copy
Common Mistakes to Avoid
- Reusing IDs across multiple buttons or form controls.
- Dynamically creating elements with hardcoded IDs instead of generating unique ones.
- Not auditing for duplicate IDs after merging UI components.
Related WCAG Criteria
- 4.1.1: Parsing