- Success Criterion 1.3.1
- Conformance level A
- W3C reference F111
Visible Label Text With No Matching Accessible Name
1.3.1 — Info and Relationships
Scenario
Setting
A ticket marketplace's seat-selection map
What’s wrong
A control shows label text on screen but has no accessible name at all — screen readers announce nothing useful and voice control can't target it.
Example
<div class="heading">Shipping Address</div>Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
How to test
Focus each form field with Tab and listen: if a screen reader announces only 'edit text' with no name, the visible label text isn't programmatically connected.
How to fix
Give the control an accessible name that includes its visible label text.
<h2>Shipping Address</h2>A real heading element exposes the section structure to assistive tech; a styled div doesn't.
Outcome
On a ticket marketplace's seat-selection map, this barrier is gone for screen-reader, braille — they reach the same outcome without extra effort.
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