Overview

Landmark regions are the structural backbone of accessible web pages. Screen reader users rely on landmarks to understand page layout and jump between sections without tabbing through every element. When a page is built entirely from <div> elements, screen readers report “no landmarks found” and users lose the ability to navigate by structure. Proper use of semantic elements like <header>, <nav>, <main>, <aside>, and <footer> creates an implicit landmark map that mirrors what sighted users perceive visually.

WCAG Criteria:

• 1.3.1 Info and Relationships  — information and relationships conveyed through presentation must be programmatically determinable
• 2.4.1 Bypass Blocks  — provide a way to skip repeated blocks of content

Key requirements:

• Every page should have exactly one <main> element
• Use <header>, <nav>, <main>, <aside>, and <footer> instead of generic <div> elements
• When multiple instances of the same landmark exist (e.g., two <nav> elements), give each a distinct aria-label
• Exclude the role name from aria-label: use <nav aria-label="Primary"> not <nav aria-label="Primary navigation">
• <section> without a label is not a landmark — add aria-labelledby referencing its heading
• Screen readers list landmarks in a rotor/elements list — good structure enables quick jumping

Page Structure

<!-- All divs — screen reader finds no landmarks -->
<div class="header">
  <span>My Site</span>
  <div class="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</div>
<div class="content">
  <div class="main">
    <div class="title">Welcome</div>
    <p>This is the main content area of the page.</p>
  </div>
  <div class="sidebar">
    <div class="title">Related</div>
    <p>Sidebar content here.</p>
  </div>
</div>
<div class="footer">© 2026 My Site</div>

<header>
  <span>My Site</span>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>This is the main content area of the page.</p>
</main>
<aside aria-label="Related">
  <h2>Related</h2>
  <p>Sidebar content here.</p>
</aside>
<footer>© 2026 My Site</footer>

What’s wrong with div soup?

• Screen readers report “no landmarks found” — users cannot jump between page regions
• The heading structure is lost because <div class="title"> has no semantic meaning
• There is no way to distinguish the header, content, sidebar, or footer programmatically
• Keyboard users relying on landmark navigation shortcuts (e.g., D in NVDA, rotor in VoiceOver) get nothing

What the screen reader announces:

Multiple Nav Elements

<!-- Two navs with no labels — screen reader just says "navigation" twice -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>
<main>
  <p>Page content goes here.</p>
</main>
<nav>
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
  <a href="/sitemap">Sitemap</a>
</nav>

<!-- Distinct aria-labels — exclude "navigation" from the label (redundant) -->
<nav aria-label="Main">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>
<main>
  <p>Page content goes here.</p>
</main>
<nav aria-label="Footer">
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
  <a href="/sitemap">Sitemap</a>
</nav>

What’s wrong with unlabeled duplicate landmarks?

• Screen readers list both as “navigation” with no way to tell them apart
• Users navigating via the landmarks rotor cannot choose the correct nav without trial and error
• Adding aria-label="Main navigation" is redundant — the screen reader already announces “navigation,” so the user hears “Main navigation, navigation”

What the screen reader announces:

Resources

• WAI-ARIA Authoring Practices — Landmark Regions 
• MDN — <main> element
• WCAG 1.3.1 — Info and Relationships 
• WCAG 2.4.1 — Bypass Blocks