- 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
Here's a real case from a government tax-filing portal: 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.).
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On a government tax-filing portal, this barrier means they can't tell what's going on without extra effort.
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
Make every id unique so labels and associations resolve to the right element.
Outcome
Corrected, a government tax-filing portal now lets a visitor move through the content with confidence.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells