# Landmark Roles

> Canonical HTML version: https://rocketvalidator.com/glossary/landmark-roles
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Landmark roles are specific ARIA roles or HTML5 semantic elements that define the major structural regions of a web page, enabling assistive technology users to quickly identify and navigate to key sections such as the banner, navigation, main content, and footer.

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:

| HTML Element | Implicit ARIA Role | Condition |
|---|---|---|
| `<header>` | `banner` | Only when not nested inside `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>` |
| `<nav>` | `navigation` | Always |
| `<main>` | `main` | Always (use only once per page) |
| `<aside>` | `complementary` | Always |
| `<footer>` | `contentinfo` | Only when not nested inside `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>` |
| `<form>` | `form` | Only when it has an accessible name |
| `<section>` | `region` | Only when it has an accessible name |

### 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

```html
<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

```html
<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

```html
<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

```html
<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.