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 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.<form id="site-search" role="search">
<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>
<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.<form id="site-search" role="search">
<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>
<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