• Success Criterion 1.3.1
  • Conformance level A
  • W3C reference F17 (legacy)

Duplicate Element IDs Breaking Form Label Connections

1.3.1 — Info and Relationships

Scenario

Setting

A government tax-filing portal

What’s wrong

Two elements share the same id, so a label points at the wrong field (or none) — screen readers announce the wrong name. (Old WCAG 2.0 failure — still fails this rule when it breaks label associations.).

Example 

<label for="ssn">Social Security Number</label>
<input id="ssn" type="text">
...
<label for="ssn">Spouse's Social Security Number</label>
<input id="ssn" type="text">

Why it matters

A filer using a screen reader hears both fields announced as Social Security Number. They can't tell which box is theirs and which is their spouse's.

How to test

Click a label and confirm focus moves to its paired field, then check DevTools for matching for/id values with no duplicate ids elsewhere on the page.

How to fix

Every id on a page must be unique; a browser silently uses the first match, breaking any later label pointing to a duplicate.

<label for="ssn-primary">Social Security Number</label>
<input id="ssn-primary" type="text">
...
<label for="ssn-spouse">Spouse's Social Security Number</label>
<input id="ssn-spouse" type="text">

Outcome

A filer hears each Social Security Number field named correctly and enters each number in the right place.

Who is affected

Screen reader users filling out joint tax forms risk entering sensitive numbers into the wrong field.

Learn more

Related scenarios