Duplicate Id
Critical - WCAG Level A
The duplicate-id accessibility violation occurs when multiple elements in an HTML document share the same id attribute value. The id attribute is intended to be unique within a document, allowing for precise targeting of elements by CSS, JavaScript, and assistive technologies like screen readers. When id values are duplicated, it can lead to unexpected behavior in scripts and confusion for users relying on assistive technologies.
For users with disabilities, particularly those using screen readers, duplicate id values can cause significant confusion. Screen readers may announce the same element multiple times or fail to navigate correctly, leading to a frustrating experience. Additionally, keyboard users may encounter issues when trying to focus on elements that are expected to be unique, as the browser may not behave as intended.
How to fix it:
Identify Duplicate IDs
Modify IDs: Change the
idvalues to ensure each one is unique. You can append a number, a descriptive suffix, or use a combination of the element type and a unique identifier.Update References: If any CSS or JavaScript references the old
id, make sure to update those references to match the new uniqueidvalues.
Best practices:
Use meaningful
idvalues that describe the purpose of the element, making it easier for developers and users to understand.Consider using a naming convention that includes a prefix or suffix to prevent future duplicates (e.g.,
header-title-1,header-title-2).Regularly audit your HTML for duplicate
idvalues, especially after significant changes or additions to the codebase.
Common mistakes:
Simply appending numbers without a meaningful context can lead to confusion. For example,
item-1,item-2does not provide context about what these items are.Forgetting to update all references in CSS and JavaScript after changing an
idcan lead to broken functionality or styling issues.