A: Custom controls have appropriate ARIA roles (WCAG 4.1.2)
duplicate-id-aria
This means
Every element that is addressed via an ID, for example by aria-labelledby, aria-describedby or a for attribute in labels, must have a unique ID. If the same ID is assigned multiple times, assistive technologies lose the assignment. Screen readers can no longer recognize which label or description belongs to which field.
Impact
Duplicate IDs lead to serious accessibility issues. Forms, buttons, or input fields are read incorrectly or not at all. This can result in users not understanding inputs or overlooking important content. Such an error violates WCAG 4.1.2 (A) “Name, Role, Value” and has a very high impact on the evaluation.
Recommendation
- Each ID may only appear once in the entire document.
- IDs must be unique, stable, and meaningful (for example, email-input, password-field).
- If elements appear multiple times, use dynamically generated IDs or alternative assignments (for example, with aria-labelledby to different targets).
- Check forms and user-defined components in particular, as duplicate IDs often occur here as a result of copying.
Examples
Problematic:
<input id="email" type="email" name="email"><label for="email">Email address</label><input id="email" type="email" name="confirm_email"><label for="email">Repeat email</label>
Better:
<input id="email" type="email" name="email"><label for="email">Email address</label><input id="confirm_email" type="email" name="confirm_email"><label for="confirm_email">Repeat email</label>Explanation:
In the first example, both input fields share the same ID email. Screen readers cannot assign the labels correctly as a result. In the second example, both IDs are unique, so the labels are read aloud correctly.
Note
This checkpoint applies not only to visible labels, but also to links within ARIA attributes. An ID value that is used multiple times can make several elements “invisible” or create incorrect relationships.
Related WCAG criterion:
WCAG 4.1.2 – Name, Role, Value