duplicate-id-aria

Ensure every id attribute value used in ARIA and in labels is unique.

Description

The value given to an id attribute in ARIA or form labels must be unique to avoid assistive technology missing the second instance. To put it another way, do not use id values in ARIA and labels more than once to help distinguish one element from another on the same page.

Why is it important?

Labels and ARIA relationship attributes (like aria-controls, aria-labelledby, and aria-owns) rely on distinct id values to recognize particular UI elements. Assistive technologies are likely only to recognise the first element when numerous elements on a web page share the same id value and ignore the others.

Common validation errors like duplicate IDs can make labels, like ARIA components, form fields, and table header cells, inaccessible.

Examples

• Success:
  • The aria-labelledby attribute relates to specific <p> elements with specific id values. For each control, assistive devices report the proper label.
• Failure:
  • A web page has different controls for searching within the current page and the entire site. A <p> element’s aria-labelledby attribute is used to name each control. However, the id value of both <p> components is the same. The first element that matches the given id value is used by assistive technologies when interpreting these aria-labelledby attributes. Consequently, "Search this site" is displayed in both search fields. Users of assistive technology would remain unaware that the second search field is truly for page-level searches.

How to fix?

Ensure every id used in ARIA attributes and for attributes on a label is unique; rename any duplicate id values.

Tags

cat.parsing, wcag2a, wcag411

References

• WCAG 4.1.1: Parsing
• Deque University: duplicate-id-aria
• Accessibility Insights: duplicate-id-aria
• Evinced Digital Accessibility Knowledge Base: duplicate-id-aria