Landmark Roles

Landmark roles provide a structural map of a web page. They allow screen reader users to jump directly between major sections—such as the site header, primary navigation, main content area, sidebar, and footer—without having to read through every element sequentially. Think of landmarks as a table of contents for the page’s layout: they communicate what purpose each region serves so that assistive technologies can present a concise overview of the page structure.

There are eight landmark roles defined in the WAI-ARIA specification: banner, navigation, main, complementary, contentinfo, search, form, and region. Most of these have equivalent HTML5 semantic elements—<header>, <nav>, <main>, <aside>, <footer>, and <form>—that carry the landmark role implicitly. Using the native HTML element is always preferred over adding an explicit role attribute, because it provides the correct semantics by default and requires no additional ARIA.

Why landmark roles matter

Screen reader users rely heavily on landmarks to orient themselves. When a page is well-landmarked, a user can press a single keystroke (for example, the D key in NVDA or the rotor in VoiceOver) to list every landmark and jump to the one they need. Without landmarks, the user must tab or arrow through the entire DOM, which is slow, frustrating, and error-prone—especially on content-heavy pages.

Landmarks also benefit people using voice control software, braille displays, and other assistive technologies. Search engines use semantic structure to understand content hierarchy, so proper landmarking can improve SEO as well.

When landmarks are missing or misused, several problems arise:

• No quick navigation — Screen reader users lose the ability to skip to sections.
• Duplicate unlabeled landmarks — If a page has two <nav> elements without accessible names, users cannot tell them apart.
• Misleading structure — Wrapping unrelated content in <main> or using role="navigation" on a non-navigation element confuses users about the page layout.

How landmark roles work

Implicit landmarks from HTML5 elements

Using the correct semantic element automatically exposes the landmark role to the accessibility tree:

Labeling duplicate landmarks

When the same landmark type appears more than once—such as multiple <nav> elements—each must have a unique accessible name so users can distinguish them. Use aria-label or aria-labelledby to provide that name.

The search landmark

HTML now includes a <search> element that maps to the search landmark role. For broader browser support, you can still use role="search" on a <form> or <div>.

Code examples

Bad example — no landmarks

<div id="header">
  <div id="logo">My Site</div>
  <div id="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</div>
<div id="content">
  <h1>Welcome</h1>
  <p>Page content goes here.</p>
</div>
<div id="sidebar">
  <h2>Related links</h2>
</div>
<div id="footer">
  <p>&copy; 2024 My Site</p>
</div>

This page uses only generic <div> elements. Screen readers see no landmarks, so users have no way to jump between regions.

Good example — semantic HTML with labeled landmarks

<header>
  <a href="/" aria-label="My Site home">
    <img src="/logo.svg" alt="My Site">
  </a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>Page content goes here.</p>
</main>
<aside aria-label="Related links">
  <h2>Related links</h2>
  <ul>
    <li><a href="/topic-a">Topic A</a></li>
  </ul>
</aside>
<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/privacy">Privacy</a></li>
      <li><a href="/terms">Terms</a></li>
    </ul>
  </nav>
  <p>&copy; 2024 My Site</p>
</footer>

Here, the page exposes banner, navigation (labeled “Primary”), main, complementary, a second navigation (labeled “Footer”), and contentinfo landmarks. Each duplicate <nav> has a distinct aria-label, letting screen reader users tell them apart.

Bad example — duplicate landmarks without labels

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
<main>
  <h1>Welcome</h1>
</main>
<nav>
  <a href="/privacy">Privacy</a>
  <a href="/terms">Terms</a>
</nav>

A screen reader would announce two navigation landmarks with no distinguishing label, leaving the user guessing which is which.

Good example — search landmark

<search>
  <form action="/search" method="get">
    <label for="q">Search the site</label>
    <input type="search" id="q" name="q">
    <button type="submit">Search</button>
  </form>
</search>

The <search> element exposes the search landmark natively. If you need to support older browsers, replace <search> with <div role="search"> while keeping the rest identical.

By combining semantic HTML elements with clear, unique accessible names, you give every user—regardless of how they interact with the page—a reliable way to understand and navigate your site’s structure.