• Success Criterion 4.1.2
  • Conformance level A

Duplicate Element IDs Causing a Control’s Name to Resolve Wrong

4.1.2 — Name, Role, Value

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Duplicate IDs making aria-labelledby (code pointing to the element that names it)/for resolve to the wrong node (name wrong).

Example 

<div id="notes-label">Notes for Maria</div>
<input type="text" aria-labelledby="notes-label">
<!-- repeated for every caregiver card -->
<div id="notes-label">Notes for James</div>
<input type="text" aria-labelledby="notes-label">
<!-- both inputs share the id "notes-label", so both fields resolve to the first match: "Notes for Maria" -->

Why it matters

A parent adding notes for a second caregiver hears both fields announced as "Notes for Maria," risking notes on the wrong person.

How to test

Inspect for/id and aria-labelledby references in DevTools: if duplicate ids exist on the page, the browser may resolve a name to the wrong element.

How to fix

Generate a unique id per repeated component instance, for example by appending the caregiver's record id.

<div id="notes-label-maria">Notes for Maria</div>
<input type="text" aria-labelledby="notes-label-maria">

<div id="notes-label-james">Notes for James</div>
<input type="text" aria-labelledby="notes-label-james">

Outcome

A parent hears "Notes for James" correctly and adds a note to the right caregiver's card.

Who is affected

Screen reader users booking multiple caregivers cannot reliably tell which notes field belongs to which person.

Learn more

Related scenarios