
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

<PassFailGrid>
<FailSection>

Two static elements have the same `id` values. Scripting and assistive technologies might confuse the two elements, with unpredictable results.

</FailSection>
<FailExample example={`<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>
`} />
<PassSection>

The elements have unique `id` values. Scripting and assistive technologies reliably treat them as separate entities.

</PassSection>
<PassExample example={`<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>
`} />
</PassFailGrid>

## About this rule

This rule passes if:

-   Document has no static elements that share the same id attribute value

## More examples

<Links>
    <HyperLink href="https://www.w3.org/WAI/WCAG21/Understanding/parsing.html">Understanding Success Criterion 4.1.1: Parsing</HyperLink>
</Links>


duplicate-id

Why it matters

How to fix

Example

Fail

Pass

About this rule

More examples