id attribute values must be unique

WCAG 4.1.1
Parsing

Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).

Why this matters and how to fix it

Why this matters

Duplicate IDs and malformed markup confuse assistive technologies and scripts that depend on unique identifiers.

How to fix this issue

Ensure every `id` is unique; validate HTML; avoid cloning markup with duplicated IDs.

Automated detection · Manual review recommended

Developer guidance

Create CI checks for duplicate IDs and invalid markup in templates/components.

Code examples

Incorrect Implementation

<div id="price"></div><div id="price"></div>

Correct Implementation

<div id="price"></div><div id="price-total"></div>
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance