kweri

Field Guide

Semantic Landmarks

Landmark regions are the structural signposts of a page — elements like <main>, <nav>, <header>, and <footer> — that let a screen reader jump straight to the part a user wants instead of reading the whole page from the top.

Why it matters for your site

A sighted visitor instantly sees where the navigation is, where the main content starts, and where the footer begins. A screen reader user gets none of that visual layout — landmarks are how they get it instead. With proper landmarks, they can jump directly to the main content and skip past the repeated navigation on every page.

Without landmarks, a screen reader presents the page as one long, undifferentiated stream. The user has to listen through the header and navigation on every single page before reaching the content — exhausting, and a common reason people abandon a site that's technically 'readable' but practically unusable.

The same structure helps automated tools that parse your page — search engines and AI engines included. When the main content is clearly marked as the main content, it's easier for them to identify and extract what matters, rather than guess where the substance is among the navigation and boilerplate.

How to check it yourself

  1. View the page source and check whether your layout uses semantic elements — <main>, <nav>, <header>, <footer> — or whether everything is wrapped in generic <div> tags. Generic divs carry no landmark meaning.
  2. Install a free accessibility extension like axe DevTools or the Landmarks browser extension, which lists the landmark regions on a page and highlights what's missing.
  3. On macOS, turn on VoiceOver and open the rotor (Control+Option+U), then choose Landmarks. The list you see is exactly how a screen reader user navigates your page's structure.
  4. Confirm there is exactly one <main> element wrapping your primary content, and that navigation, header, and footer use their matching semantic elements.
  5. The Kweri audit flags pages that lack a <main> element and other semantic landmarks in the AI-Readiness section of your report.

Technical detail

Native HTML5 elements expose ARIA landmark roles automatically: <main> exposes the 'main' landmark, <nav> exposes 'navigation', and <aside> exposes 'complementary'. Using the native element is preferred over adding ARIA roles to a generic <div>.

A top-level <header> exposes the 'banner' landmark and a top-level <footer> exposes 'contentinfo' — but only when they are not nested inside <main>, <article>, <aside>, <nav>, or <section>. Nested inside those, they are scoped to that section rather than the page, which is usually what you want.

There should be exactly one <main> per page, wrapping the primary content. A search box can be marked with role="search" on its container. Add explicit ARIA roles only when no native element fits — redundant roles on native elements add noise.

Landmarks support WCAG 2.2 navigation criteria (such as 2.4.1 Bypass Blocks, which lets users skip repeated content). They are foundational accessibility structure first; the benefit to automated parsers is a genuine bonus, not the primary reason to use them.

For the authoring practices for landmark regions, see W3C WAI-ARIA — Landmark Regions →

Related

WCAG POUR Principles

Web accessibility is organised around four principles: content must be Perceivable, Operable, Understandable, and Robust — failure on any one principle makes content inaccessible to some users.

Labels and Names

Labels and names are the text that assistive technology reads out when a user encounters a button, link, or form field — without them, screen readers and voice control tools cannot tell users what an interactive element does.

See Semantic Landmarks on your own site

Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.

Run a free audit →