Ensure every id attribute value used in ARIA and in labels is unique

In HTML, the id attribute must be unique within a document. This uniqueness is crucial when IDs are referenced by ARIA attributes or form labels to ensure proper association and functionality.

About This Rule

This rule ensures that every id attribute value used in ARIA attributes and form labels is unique within the HTML document. Adhering to this rule prevents accessibility issues and maintains valid markup.

Why It Matters

Duplicate IDs can disrupt the accessibility and functionality of web elements. When multiple elements share the same ID, assistive technologies and client-side scripts may only recognize the first instance, leading to:

• Incorrect labeling of form fields.
• Misinterpretation of ARIA roles and properties.
• Potential scripting errors due to invalid markup.

Ensuring unique IDs helps maintain the integrity of element associations, enhancing accessibility for users relying on assistive technologies.

How to Fix

To resolve issues with duplicate IDs:

• Audit your HTML to identify any repeated ID values.
• Rename duplicate IDs to ensure each one is unique within the document.
• Update any references (e.g., for attributes in labels, ARIA attributes) to match the new unique IDs.

Example

Incorrect

Multiple elements sharing the same ID:

<label for="username">Username:</label>
<input id="username" type="text" name="user1">

<label for="username">User Name:</label>
<input id="username" type="text" name="user2">

Correct

Each element with a unique ID:

<label for="username1">Username:</label>
<input id="username1" type="text" name="user1">

<label for="username2">User Name:</label>
<input id="username2" type="text" name="user2">