- Success Criterion 1.3.1
- Conformance level A
Page Content Missing Landmark Regions Entirely
1.3.1 — Info and Relationships
Scenario
Setting
A music streaming app's playlist screen
What’s wrong
Landmarks absent or wrong: page content outside any landmark (a coded page region), multiple unlabeled navs, banner/main misuse.
Example
On a music streaming app's playlist screen, a visitor hits this wall: landmarks absent or wrong: page content outside any landmark (a coded page region), multiple unlabeled navs, banner/main misuse.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (a music streaming app's playlist screen), they lose track of what belongs to what.
How to test
Use a screen reader's landmarks list (NVDA Insert+F7, VoiceOver Rotor): confirm one main, correctly labeled nav/banner/contentinfo — content sitting outside any landmark fails.
How to fix
Place all content in labeled landmarks (coded page regions): one main, named navs, correct banner/contentinfo.
Outcome
Once corrected, a music streaming app's playlist screen 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