Landmark Regions

Landmark regions are HTML elements that divide a page into named, navigable zones. They are how screen reader users orient themselves and skip around a page without listening to everything in sequence.

The core landmarks

Element	Role	Purpose
<header>	banner	Site header, logo, top-level navigation
<nav>	navigation	A set of navigation links
<main>	main	The primary content of the page
<footer>	contentinfo	Site footer
<aside>	complementary	Secondary content related to the main content
<section aria-label="...">	region	A named section when no other landmark applies

Content that sits outside all of these regions is considered unlabeled. A screen reader user navigating by landmark has no way to reach it directly.

Why it matters

Landmarks let users jump directly to content zones. A user who wants the main content does not need to Tab through the entire header and navigation - they jump straight to <main>. A user who wants the navigation jumps to <nav>.

Without landmarks, the page is a flat sequence. Everything must be read or tabbed through in order - a significant burden on pages with large headers, multiple menus, sidebars, and footers.

What goes wrong

The most common cause is layout built with generic <div> containers. A <div class="header"> looks like a header visually but provides no landmark to assistive technology. Class names are invisible to screen readers.

How to fix

Replace non-semantic containers with the appropriate HTML element:

<!-- Before -->
<div class="header">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>

<!-- After -->
<header>...</header>
<main>...</main>
<footer>...</footer>

For content that does not fit a standard landmark, use <section> with an aria-label:

<section aria-label="Recent announcements">
  ...
</section>

If a page has multiple <nav> elements, give each one a label so users can distinguish them:

<nav aria-label="Primary">
<nav aria-label="Footer">

Quick check

WCAG criteria