Unique IDs for ARIA references
Last updated:
How to fix duplicate-id-aria?
Each ID on a page must appear only once. When using ARIA attributes that reference an ID, verify that the target ID is unique:
CORRECT:
unique IDs
<label id="email-label">Email address</label>
<input type="email" aria-labelledby="email-label"/>
<label id="phone-label">Phone number</label>
<input type="tel" aria-labelledby="phone-label"/>
CORRECT:
aria-describedby with unique ID
<input type="password" aria-describedby="password-hint"/>
<p id="password-hint">Use at least 8 characters.</p>
The following is invalid because two elements share the same ID:
BAD:
duplicate ID
<label id="field-label">Email address</label>
<input type="email" aria-labelledby="field-label"/>
<label id="field-label">Phone number</label>
<input type="tel" aria-labelledby="field-label"/>
In the example above, both inputs reference field-label, so the second input may be announced incorrectly or not at all.
Why is this important?
ARIA attributes work by referencing IDs on the page. When IDs are duplicated, browser behavior is unpredictable.
More info:
Rule info
Standard
WCAG A SC 4.1.2
User impact
Critical impact Prevents users with disabilities from accessing content entirely. Must be fixed. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
High level of required technical expertise To resolve this issue, you need technical expertise in software engineering. Resolving this issue requires modifying the software code, for which you need a background in software engineering.Affects
Visual People with vision related disabilities can include those with color blindness, low vision, or complete blindness. Providing alternative text (also known as alt text) for graphical content is especially important for these individuals, as it allows assistive technologies such as screen readers to describe the content to them. Mobility disability For people with mobility disabilities, it is important to design websites that are easy to navigate and use without requiring precise movements or actions. This can involve designing websites with simple and clear navigation, avoiding complex or confusing layouts, and ensuring that all interactive elements are large enough to be easily clicked or tapped. Additionally, providing alternative methods of input such as voice commands or alternative pointing devices can be helpful for individuals who may have difficulty using a standard mouse or keyboard.
Free Website Accessibility Audit
Was this article helpful?
Thanks for your feedback!