• 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 

<div class="topbar">...</div>
<div class="sidebar-nav">...</div>
<div class="playlist-content">...</div>

Why it matters

A screen reader user can't jump to the playlist content directly, since nothing on the page is marked as a landmark to skip to.

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

Landmark elements let assistive tech users jump straight to a page region, skipping everything they don't need.

<header class="topbar">...</header>
<nav aria-label="Sections" class="sidebar-nav">...</nav>
<main class="playlist-content">...</main>

Outcome

A user jumps directly to the playlist region instead of tabbing past the sidebar and top bar every time.

Who is affected

Screen reader users navigating by region have to read through the entire page linearly to reach the playlist.

Learn more

Related scenarios