Ensure all element IDs are unique within the page

WCAG 4.1.1
Parsing

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Every ID must be unique — never reuse the same ID on multiple elements.

Why this matters and how to fix it

Why this matters

IDs are used to create explicit relationships in accessibility (e.g., labels, error messages, descriptions). If two elements share the same ID, assistive technologies and browsers may associate labels or messages with the wrong element, leading to incorrect or misleading announcements.

How to fix this issue

Ensure every `id` is unique within the document. In component-based systems, do not hardcode IDs—generate them dynamically or use naming patterns. For repeated components, append a unique token, index, or UUID.

Automated detection · Manual review recommended

Developer guidance

This failure most often appears in form components, list items, repeated modals, and tables. In design systems, ensure components receive `id` as a prop instead of defining a fixed internal ID. Enable linting to detect duplicate IDs during development.

Code examples

Incorrect Implementation

<label for="email">Email</label>
<input id="email" />
<input id="email" />

Correct Implementation

<label for="email-1">Email</label>
<input id="email-1" />
<label for="email-2">Email</label>
<input id="email-2" />

Real-World Examples

Before

<form>
  <UserEmailField />
  <UserEmailField />
</form>

<!-- Component contains internal id="email" hardcoded → duplicated in DOM -->

After

<form>
  <UserEmailField id="email-primary" />
  <UserEmailField id="email-secondary" />
</form>

<!-- Component accepts id as a prop → unique per instance -->

Manual testing

  1. 1. Open browser dev tools and inspect the DOM.
  2. 2. Search for: id="..." → verify each appears only once.
  3. 3. If testing a form: ensure every <label for="id"> points to exactly one input.
  4. 4. Turn on a screen reader and navigate the form.
  5. • Expected: Each label is announced with the correct input.
  6. • Failure case: The screen reader announces the wrong label or skips fields.
  7. 5. If using repeatable components: trigger UI that adds dynamic items (e.g., “Add new address”). Confirm new IDs are generated instead of duplicated.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance