What does this accessibility issue mean?
Accessibility issue summary: ARIA and label id attribute values are duplicated
If two or more ARIA attributes use the same ID reference, it can cause issues for assistive technologies that use these ID attribute values to navigate and ‘understand’ the web page.
This accessibility issue is related to WCAG rules around Parsing (WCAG Level A).
Solution:
Ensure every id attribute value used in ARIA and in ARIA labels is unique.
Example HTML violation: Duplicate ARIA and label IDs (WCAG Level A Issue)
<label id="uniqueID" for="name">Name:</label>
<input id="uniqueID" name="name" type="text" aria-labelledby="uniqueID" />
<label id="uniqueID" for="email">Email:</label>
<input id="uniqueID" name="email" type="text" aria-labelledby="uniqueID" />The HTML above violates the duplicate-id-aria accessibility rule according to the guidelines provided by the W3C Web Accessibility Initiative (WAI). This rule requires the use of unique id values to ensure proper association between labels and their corresponding form fields. Assistive technologies rely on these id values to provide necessary information to users, thereby enhancing accessibility. Reusing an id can confuse such technologies and result in a poor user experience.
How to fix "Duplicate ARIA and label IDs (WCAG Level A Issue)" issue
<label id="nameID" for="name">Name:</label>
<input id="name" name="name" type="text" aria-labelledby="nameID" />
<label id="emailID" for="email">Email:</label>
<input id="email" name="email" type="text" aria-labelledby="emailID" />In the corrected code:
Each label is given a unique id ("nameID" for the Name field, "emailID" for the Email field).
The for attribute of the label tag matches the id of the corresponding input tag. This associates the label with the correct form field.
The aria-labelledby attribute on the input references the id of the corresponding label, ensuring that assistive technologies can correctly link the relationship between the label and the form field. You can test the validity of this HTML markup using the W3C validator to make sure that no ID values are reused.
For future reference, you may wish to look at the ARIA required ID references and ID attribute value is unique rules, among others, provided by the W3C Web Accessibility Initiative (WAI). Side by side with standard HTML validation, these tools help ensure rigorous compliance with best practices for accessible web design.
