Landmark Roles — Banner, Navigation, Main, Complementary and Contentinfo

In this tutorial, you will learn about Landmark Roles. We cover key concepts, practical examples, and best practices to help you master this topic.

ARIA landmark roles identify major page sections like banner, navigation, main, complementary, and contentinfo, enabling screen reader users to navigate and jump between regions quickly.

In this tutorial, you'll learn how to use landmark roles effectively in your ARIA page structure.

What You'll Learn

By the end of this lesson, you'll understand all landmark roles, their native HTML equivalents, when to label landmarks, and how landmarks improve screen reader navigation.

Why It Matters

Landmarks are the primary way screen reader users navigate pages. Without landmarks, users must read through the entire page to find specific content.

Real-World Use

DodaBrowser's documentation site uses landmarks for the header, navigation, main content, sidebar, and footer, allowing users to jump directly to content.

Landmark Navigation

flowchart TD
  A[Page Loads] --> B[Screen reader user opens landmarks list]
  B --> C[User sees landmarks]
  C --> D[ banner - Site header]
  C --> E[ navigation - Main menu]
  C --> F[ main - Page content]
  C --> G[ complementary - Sidebar]
  C --> H[ contentinfo - Footer]
  D --> I[Jump to banner]
  F --> J[Jump to main content]

Available Landmark Roles

<header role="banner">
  <h1>DodaTech Tutorials</h1>
</header>

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

<main role="main">
  <h2>Page Title</h2>
  <p>Content here.</p>
</main>

<aside role="complementary">
  <h3>Related Topics</h3>
</aside>

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

When to Label Landmarks

Label landmarks when there are multiple instances of the same role:

<nav role="navigation" aria-label="Main navigation">
  <!-- primary nav -->
</nav>
<nav role="navigation" aria-label="Footer navigation">
  <!-- footer nav -->
</nav>

Without labels, the screen reader just says "navigation" twice without distinguishing them.

HTML5 vs ARIA Landmarks

Modern HTML5 sectioning elements implicitly create landmarks:

Use HTML5 elements. Reserve ARIA landmark roles for when you cannot use the native element.

Common Mistakes

• Using role="banner" on a <header> inside <article>: Only body-level header gets the banner role.
• Forgetting labels when multiple nav elements exist: Differentiate with aria-label.
• Using role="main" multiple times: Only one main landmark per page.
• Applying role="contentinfo" to non-footer elements: The role is specific to footer content.
• Missing landmark roles entirely: Every page should have at least main and navigation landmarks.

Practice and Challenge

1. What are the six main landmark roles? banner, navigation, main, complementary, contentinfo, form.

2. Do HTML5 sectioning elements have implicit landmark roles? Yes. <nav> implies navigation, <main> implies main, etc.

3. When should you label a landmark? When there are multiple landmarks of the same role on the page.

4. How many main landmarks should a page have? One.

5. Challenge: Create a page layout with all major landmarks. Use HTML5 elements where possible and ARIA roles only where needed.

FAQ

Mini Project

Take an existing web page and add proper landmark structure. Use HTML5 sectioning elements first, then supplement with ARIA roles where needed.

What's Next

Continue to Document Structure Roles to learn about article, section, heading, and more.