Navigating by Landmarks — How Screen Readers Use ARIA Landmarks

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

Screen reader users navigate by ARIA landmarks using the D key or landmark lists, making proper landmark roles and labels essential for efficient page navigation.

In this tutorial, you'll learn how Screen Readers use landmarks.

What You'll Learn

By the end of this lesson, you'll understand how screen readers expose landmarks, how to label multiple landmarks, and how to test landmark navigation.

Why It Matters

Landmarks are the third most common navigation method. Without proper landmarks, users must read through the entire page to find content regions.

Real-World Use

DodaTech uses landmarks on every page so screen reader users can quickly jump between the navigation, main content, and sidebar.

Landmark Navigation

flowchart TD
  A[User presses D] --> B[Jumps to next landmark]
  B --> C{Multiple landmarks of same type?}
  C -->|Yes| D[Check aria-label for distinction]
  C -->|No| E[Landmark is clear]
  D --> F[Labels differentiate navigation]
  E --> G[User accesses landmark content]
  F --> G
  G --> H[Press Shift+D for previous landmark]

How Screen Readers Announce Landmarks

<!-- Screen reader announces each landmark -->
<nav aria-label="Main">        → "Main navigation landmark"
<nav aria-label="Footer">      → "Footer navigation landmark"
<main>                          → "Main landmark"
<aside>                         → "Complementary landmark"
<footer>                        → "Content info landmark"

Press D to jump forward and Shift+D to jump backward between landmarks.

Landmark Lists

Similar to heading and link lists, landmarks can be listed:

• NVDA: NVDA+F6 (includes landmarks)
• JAWS: F6 to navigate, Insert+F6 for list
• VoiceOver: Rotor > Landmarks
• Narrator: CapsLock+F5 for list

<!-- Proper landmark structure with labels -->
<header>
  <nav aria-label="Main">
    <ul><!-- main navigation --></ul>
  </nav>
</header>

<main>
  <h1>Scan Results</h1>
  <!-- content -->
</main>

<aside aria-label="Related articles">
  <!-- sidebar content -->
</aside>

<footer>
  <nav aria-label="Legal">
    <ul><!-- legal links --></ul>
  </nav>
</footer>

Labeling Multiple Landmarks

When the same landmark type appears multiple times, each must have a unique label:

<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>
<!-- Without labels, both would be announced as "navigation" -->

Common Mistakes

• Missing landmark roles: Every page needs at least main, navigation, and contentinfo.
• Not labeling multiple nav elements: Both are announced as "navigation" with no distinction.
• Using role="banner" on non-site-header elements: Banner is for site-level headers only.
• Nesting landmarks incorrectly: A main landmark inside a complementary landmark is poor structure.
• Using landmark roles on HTML5 elements that already have implicit roles: Redundant but harmless.

Practice and Challenge

1. What key jumps to the next landmark? D.

2. How do you navigate to the previous landmark? Shift+D.

3. How do you open the landmarks list in NVDA? NVDA+F6.

4. When should you label a landmark? When there are multiple landmarks of the same type.

5. Challenge: Use NVDA's D key to navigate your website. Identify all landmarks and verify they are properly labeled.

FAQ

Mini Project

Audit your website's landmark structure. Use the NVDA landmark list to list all landmarks. Ensure each landmark is appropriate and labeled correctly.

What's Next

Continue to Live Regions and Screen Readers to learn how dynamic content announcements work.