Start scanning free

( Robust / WCAG 4.1.1 )

Duplicate ID attributes found on the page

This check maps to Parsing. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Moderate Level A WCAG 4.1.1 — Parsing

What’s wrong

Two or more elements on the page share the same id attribute value.

Why it matters

IDs must be unique. When ARIA attributes like aria-labelledby or for reference an ID, the browser uses the first matching element. If the wrong element is matched, labels and descriptions point to the wrong content.

How to fix it

Make every id on the page unique. This often happens when components are copy-pasted or rendered in a loop without dynamic ID generation.

Before 
<div class="card">
  <h2 id="card-title">Product A</h2>
</div>
<div class="card">
  <h2 id="card-title">Product B</h2>
</div>
After 
<div class="card">
  <h2 id="card-title-1">Product A</h2>
</div>
<div class="card">
  <h2 id="card-title-2">Product B</h2>
</div>

// React: generate IDs dynamically
const id = `card-title-${product.id}`;

Learn more