• June 1, 2025

Fixing Duplicate ID Attributes for Accessibility

Rule ID: duplicate-id
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Not explicitly mapped (Not specified or not applicable)

How to Fix the Problem

To resolve issues with duplicate id attributes, ensure that every element in your HTML or web document has a unique id value. Here’s how:

• Identify Duplicate IDs: Use tools like the W3C HTML Validator or browser-based developer tools to find duplicate id values.

• Rename Reused IDs: Change any duplicated id values to ensure each one is distinct. This can be as simple as appending numbers or using a meaningful descriptor that reflects the element’s purpose (e.g., email-input, submit-btn-1, submit-btn-2).

• Refactor Markup and Scripts: If JavaScript or CSS refers to an element by id, make sure your new id values are correctly referenced after updating.

• Best Practices:

  • Avoid assigning id attributes automatically (especially in loops or repeated components) unless you’re confident each value is unique.

  • Use class attributes instead of id when styling or selecting multiple elements that don’t need to be uniquely identified.

Example:

Why it Matters

The id attribute in HTML is meant to uniquely identify elements in a document. Reusing the same id more than once:

• Breaks Label Associations: In forms and tables, screen readers rely on id values to link labels and headers to form fields or table cells. Duplicate ids may cause the screen reader to skip or misread content.

• Disrupts Assistive Technology: Many assistive technologies only acknowledge the first instance of a duplicated id. All subsequent elements with the same id may be ignored.

• Impacts Scripting Behavior: Client-side scripts often target elements by id. If multiple elements share the same id, only the first one is likely to be affected, leading to unpredictable behaviors.

• Invalid HTML: Duplicate ids violate HTML specifications and result in invalid markup, potentially affecting how browsers render the page or how styles/scripts are applied.

Rule Description

Each id value assigned to an element must be unique across the document. This ensures that both scripts and assistive technologies can accurately and consistently identify and interact with elements. Using unique ids is foundational to creating valid, accessible, and robust web content.

The Algorithm (in simple terms)

The rule checks every element with an id attribute and ensures that no two elements share the same id. If any duplicates are found, the page fails this check.