Back to Info and Examples for Accessibility Insights for Web
duplicate-id-active
Active, focusable elements must have unique id values.
Why it matters
When multiple active, focusable elements share the same id attribute, both scripting (such as JavaScript) and assistive technologies are likely to act only on the first and ignore the others.
As a consequence, both functionality and accessibility can be degraded. (An element is focusable if it can receive input focus via scripting, mouse interaction, or keyboard tabbing. It’s active if it is not marked as disabled.)
How to fix
Provide a unique id value for each active, focusable element.
Example
Fail
id value. Scripting and assistive technologies might confuse the two buttons, with unpredictable results.<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="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="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="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="search-submit" value="Search">
</form>
Pass
id value. Scripting and assistive technologies reliably treat them as separate entities.<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 active elements that share the same
idattribute value