Duplicate IDs

Why It Matters

• JavaScript targets the wrong element. Methods like document.getElementById() return only the first element with that ID. If there are duplicates, code that should interact with the second or third element silently targets the wrong one.
• Form labels break. The <label for="email"> attribute connects a label to an input by ID. If two inputs share id="email", the label only associates with the first one, leaving the other unlabeled and inaccessible.
• ARIA references fail. Attributes like aria-labelledby and aria-describedby reference elements by ID. Duplicate IDs mean the screen reader may announce the wrong text — or the wrong element entirely.
• CSS targeting becomes unreliable. While CSS ID selectors still style all matching elements, the assumption of uniqueness means developers write code expecting only one match. Duplicates cause unexpected styling in components that were supposed to be independent.

How to Fix It

1. Audit your pages for duplicate IDs. Use browser developer tools or an HTML validator to scan for duplicate ID values. Most accessibility checkers also flag this as an error.
2. Make every ID unique. If multiple similar elements need IDs, differentiate them: id="email-billing" and id="email-shipping" instead of both being id="email".
3. Use classes for styling groups. If multiple elements need the same styles, use a CSS class instead of an ID. Classes are designed to be shared; IDs are not.
4. Check dynamically generated content. Components rendered in loops or repeated templates are a common source of duplicate IDs. Make sure your template logic appends a unique suffix (like an index or database ID) to each generated ID.
5. Review included components and partials. When a page includes multiple instances of the same partial template, any hardcoded IDs in that partial get duplicated. Parameterize the ID values so each instance is unique.

Common Mistakes

• Copy-pasting HTML without changing IDs. The most common cause of duplicate IDs is duplicating a block of HTML and forgetting to update the ID values. Every copy needs its own unique identifiers.
• Hardcoding IDs in reusable components. A component that will be used multiple times on a page should never have hardcoded IDs. Use generated or parameterized IDs instead.
• Not noticing because it "works." Browsers are forgiving — they do not throw errors for duplicate IDs. The page appears to work, but JavaScript, accessibility, and label associations are silently broken.
• Third-party widgets adding conflicting IDs. Embedded widgets or plugins may inject elements with IDs that conflict with your own markup. Inspect the rendered output to catch these collisions.