Back to Info and Examples for Accessibility Insights for Web
duplicate-id-aria
An element referenced by a label or ARIA attribute must have a unique id value.
Why it matters
Labels and ARIA relationship attributes (such as aria-controls, aria-labelledby, and aria-owns) depend on unique id values to identify specific UI components. When multiple elements in a web page share the same id value, assistive technologies are likely to recognize only the first, and ignore others.
How to check
Make sure each ID value assigned to an ARIA attribute or a label element (via its for attribute) is different. In other words, make sure ID values that need to be referenced by ARIA attributes or label elements aren't used more than once in the same document, application, or web page.
How to fix
For each element referenced by a label or ARIA attribute, provide a unique id value.
Example
Fail
<p> element through an aria-labelledby attribute.
But both <p> elements have the same id value. When interpreting these aria-labelledby attributes, assistive technologies use the first element that matches the specified id value. As a result, both search fields are reported as "Search this site."
Assistive technology users would not know that the second search field is actually for searching within the page.<p id="search-label">Search this site</p>
<input type="search" id="site-search-field" aria-labelledby="search-label" size="50">
<input type="submit" id="site-search-submit" value="Search">
</form>
…
<form id="page-search" role=" search">
<p id="search-label">Search this page</p>
<input type="search" id="page-search-field" aria-labelledby="search-label" size="50">
<input type="submit" id="page-search-submit" value="Search">
</form>
Pass
<p> elements referenced by the aria-labelledby attributes have unique id values.
Assistive technologies report the correct label for each control.<p id="site-search-label">Search this site</p>
<input type="search" id="site-search-field" aria-labelledby="site-search-label" size="50">
<input type="submit" id="site-search-submit" value="Search">
</form>
…
<form id="page-search" role=" search">
<p id="page-search-label">Search this page</p>
<input type="search" id="page-search-field" aria-labelledby="page-search-label" size="50">
<input type="submit" id="page-search-submit" value="Search">
</form>
About this rule
This rule passes if:
- Document has no elements referenced by ARIA or labels that share the same id attribute value