Issue guide
Duplicate IDs
IDs must be unique in the DOM.
Duplicate `id` values break the association between labels, inputs, and ARIA relationships—browsers and assistive tech pick the wrong node.
See this on your site
Run a scan, then match rule names in your report to the sections below.
At a glance
Instructional
Confusing tab order
DOM order matches layout
Duplicate IDs and broken ARIA relationships confuse assistive tech when it resolves references.
Why this matters
- Labels may point at the wrong field.
- Automated testing flags duplicates as high severity for good reason.
Where this shows up
Use this list to spot the same pattern on your templates and key URLs.
Forms
- Copied field groups
- Repeated address blocks
Content
- Accordions generated in loops with static ids
Fix priority — address first
- Forms with repeated sections.
- Components rendered in lists.
Fix priority — can follow
- Ids duplicated in inactive/hidden templates if only one is in the DOM (still fix for maintainability).
Who is affected
Screen reader users navigating by headings and landmarks, and voice control users.
Fix this in your platform
Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.
Fix
Rename duplicates; generate stable unique ids for lists rendered in loops.
Examples (bad vs good)
Bad
Two `<input id="email">` in the same document.
Good
Unique ids: `email-shipping`, `email-billing` with matching labels.
How to fix
- Find duplicates in devtools or the scan details.
- Generate unique ids per instance (e.g. `useId` in React).
- Update `for`/`id` and `aria-labelledby` pairs to match.
- Rescan.
Platform-specific notes
Where this often comes from on common stacks—and what to change.
- React
- Use useId (React 18+) for generated ids in loops.
Common mistakes
- Copy-pasting HTML from design tools with fixed ids.
- Using id as a React key substitute.
How to verify the fix
- Search the DOM for duplicate ids.
- Retest label clicks; rescan.
Related: 4.1.1 Parsing (historically); best practice for robustness.
Related guides
Run another scan
After you ship a fix, rescan the same URL and keep both report links to compare.
Broader topics
Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.
Related issues
Next steps
Keep the scan, fix, rescan loop going
Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.
Open scan