Make sure every id attribute value of active elements is unique

Each id attribute in HTML must be unique, especially on active or focusable elements. This rule checks for duplicate IDs that can confuse assistive technologies and break client-side scripts.

What is being tested?

The rule verifies that no two active or focusable elements share the same id value. Focusable elements include form controls, links, buttons, and interactive widgets.

Why it matters

Duplicate IDs can break relationships between <label> and form fields, table headers and cells, or ARIA attributes. Screen readers and scripts usually act only on the first element with that ID, ignoring duplicates and causing accessibility failures.

How to fix the problem

• Ensure every id value is unique on the page.
• Rename duplicate id attributes to meaningful, distinct names (e.g., email-input, email-input-2).
• Validate your HTML using tools like the W3C Markup Validator.

Example code

Incorrect example: (duplicate id)

<input type="text" id="username">
<input type="text" id="username">

Correct example: (unique ids)

<input type="text" id="username">
<input type="text" id="username-2">

Best practices

• Use IDs only when needed (e.g., to link labels, ARIA attributes, or scripts).
• Favor class selectors for styling instead of IDs.
• When using JavaScript, target elements by class or data attributes when possible to avoid ID conflicts.

Important notes

• Duplicate IDs may not break page rendering but can silently break accessibility and JavaScript behavior.
• Assistive technologies may only reference the first instance of a duplicated ID, making other elements invisible to users.