- Success Criterion 1.3.1
- Conformance level A
Form Label Not Correctly Linked to Its Input Field
1.3.1 — Info and Relationships
Scenario
Setting
A news outlet's article page
What’s wrong
label present but for/id pairing (code tying a label to its field) mismatch or duplicate ids breaking the association.
Example
A news outlet's article page runs into this exact issue: label present but for/id pairing (code tying a label to its field) mismatch or duplicate ids breaking the association.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (a news outlet's article page), they can't tell what's going on without extra effort.
How to test
Click each visible label and confirm it visually and audibly (screen reader) jumps focus to the correct paired field, not a different one nearby.
How to fix
Fix the for/id pairing (code tying a label to its field) and make ids unique so each label resolves to its field.
Outcome
Once corrected, a news outlet's article page lets them navigate the content in a sensible order.
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)
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