Description
This rule determines whether attributes id and their value are defined more than once, as they should be unique.
What happens when an ID attribute is duplicated in HTML, and why is it a problem?
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.
What is the difference between a unique ID and a duplicated ID in HTML, and why does it matter for accessibility?
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 poor user experience.
How to fix it
- Ensure that each ID is unique and only assigned to one element.
Standard
Accessibility, WCAG 2.1, Success Criterion 4.1.1 (Parsing), Level A