Attribute id should be unique
Description
Rule ID: duplicated-id-attribute
This rule determines whether attributes id and their value are defined more than once, as they should be unique.
Why it matters
A unique ID in HTML is an attribute that is assigned to an element once and only once, ensuring that no other element shares the same ID. A duplicated ID, on the other hand, is when the same ID is assigned to multiple elements. Having a unique ID is important for accessibility as it allows assistive technologies to accurately identify and interact with the intended element. When an ID is duplicated, automation and assistive technologies may only select the first element with the duplicated ID, leading to incorrect information and a poor user experience.
If the ID is not unique and is assigned to several elements, automation will fail because only the first element will be selected. Assistive technologies are also impacted by duplicate IDs since they frequently obtain data associated with the first ID. Even if other WAI-ARIA attributes are correct, assistive technologies are unlikely to provide accurate information after the duplicate ID is presented.
In CSS, selectors targeting an element by its id will apply styles to all elements with that ID if it’s not unique, which is likely not the intended outcome.
How to fix it
- Ensure that each
IDis unique and only assigned to one element.
Standard
Accessibility, WCAG 2.1, Success Criterion 4.1.1 (Parsing), Level A