Landmark Navigation

title: "Landmark Navigation — ARIA Landmarks for Page Structure" description: "Learn how ARIA landmark roles (banner, navigation, main, complementary, contentinfo) create a navigable page structure for screen reader users." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

ARIA landmark roles define the structure of a page, allowing screen reader users to jump between major regions like header, navigation, main content, and footer.

## What You'll Learn

The six standard ARIA landmark roles, how to use them, and how they improve screen reader navigation.

## Why It Matters

Landmarks are the primary way screen reader users navigate pages. Without landmarks, users must tab through all interactive elements to find what they need.

## Real-World Use

A screen reader user opens a long documentation page. They open the landmarks list and see "Banner, Navigation: Main, Main, Complementary (Table of Contents), Contentinfo." They jump directly to the table of contents to find the relevant section.

## Landmark Roles

```html
<header role="banner">
  <a href="/" aria-label="Home">
    <img src="logo.svg" alt="DodaTech">
  </a>
</header>

<nav aria-label="Main" role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<main role="main">
  <h1>Page title</h1>
  <p>Main content here.</p>
</main>

<aside role="complementary" aria-labelledby="sidebar-heading">
  <h2 id="sidebar-heading">Related articles</h2>
  <ul>
    <li><a href="/related">Related article</a></li>
  </ul>
</aside>

<footer role="contentinfo">
  <p>Copyright 2026 DodaTech</p>
</nav>

HTML5 Element Mapping

HTML5 elements map to landmarks automatically:

• header (not nested in main/aside/footer) -> banner
• nav -> navigation
• main -> main
• aside (not nested in main) -> complementary
• footer (not nested in main/aside) -> contentinfo

Search Landmark

<form role="search" aria-label="Search the site">
  <label for="site-search" class="sr-only">Search</label>
  <input type="search" id="site-search" name="q" autocomplete="search">
  <button type="submit">Search</button>
</form>

Common Mistakes

1. Missing main landmark

Every page needs exactly one main landmark marking the primary content.

2. Multiple main landmarks

There should be exactly one main element per page.

3. Using role=contentinfo on nested footers

The footer of an article or section should not use role=contentinfo. Only the page-level footer uses this role.

4. Forgetting the banner role

The site header should have role=banner (or use the header element in the correct context).

5. Landmarks without labels when duplicated

Multiple navigation or complementary regions need unique labels.

Practice Questions

1. How many main landmarks should a page have? Exactly one. The main landmark contains the primary content unique to that page.

2. What landmark role does the HTML header element provide? role=banner, but only when the header is at the top level of the page, not nested inside article or aside.

3. How does a screen reader user access landmarks? Through the landmarks list in the screen reader (NVDA: Insert + F7 > Landmarks, VoiceOver: Rotor > Landmarks).

Challenge: Add all six landmark roles to a page. Verify each appears in the screen reader landmarks list with a descriptive label where needed.

FAQ

Mini Project

Build a complete page template with header/banner, navigation, search, main content, complementary sidebar, and footer. Add landmarks and test screen reader landmark navigation.

What's Next

Learn about Accessible Breadcrumbs and how to implement breadcrumb navigation with proper ARIA attributes and aria-current.