Ensure every id attribute value is unique

Every id attribute on a page must be unique. This rule ensures no two elements share the same id, which is critical for accessibility and valid HTML.

What is being tested?

The rule checks that each element using the id attribute has a unique value across the document.

Why it matters

Duplicate IDs can break important features:

• Screen readers may only detect the first instance, skipping others.
• Form labels and table headers may stop working properly.
• JavaScript may only act on the first element with that ID, ignoring the rest.

How to fix the problem

• Rename duplicate id values to ensure uniqueness.
• For repeated elements, use distinct IDs like button-1, button-2, etc.
• Check your HTML with the W3C Markup Validator to spot duplicate IDs.

Example code

Incorrect example: (duplicate id)

<label for="email">Email</label>
<input type="text" id="email">
<input type="text" id="email">

Correct example: (unique ids)

<label for="email">Email</label>
<input type="text" id="email">
<input type="text" id="email-2">

Best practices

• Use IDs only when necessary, such as for form labels or ARIA attributes.
• Prefer class selectors for styling or JavaScript targeting when multiple elements are involved.
• Be consistent with ID naming to avoid confusion or future duplication.

Important notes

• Duplicate IDs don’t just affect accessibility — they can also break JavaScript functionality.
• Even though WCAG 2.0 does not require valid HTML, valid markup helps prevent many accessibility issues.