Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

duplicate-id

Static elements must have unique id values.

Why it matters

Duplicate id values are a common, easily fixed validation error that can cause both scripting (such as JavaScript) and assistive technologies to behave unexpectedly. Duplicate id values can degrade both functionality and accessibility.

How to fix

Provide a unique id value for each element.

Example

 

Fail

Two static elements have the same id values. Scripting and assistive technologies might confuse the two elements, with unpredictable results.
<form id="search" role="search">
<p id="site-search-label">Search this site</p>

<form id="search" role=" search">
<p id="page-search-label">Search this page</p>
 

Pass

The elements have unique id values. 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>

<form id="page-search" role=" search">
<p id="page-search-label">Search this page</p>

About this rule

This rule passes if:

  • Document has no static elements that share the same id attribute value

More examples