Provide landmark regions for major page areas

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Landmarks are *navigation shortcuts* — one main, one banner, others labeled if repeated.

Why this matters and how to fix it

Why this matters

Landmarks such as header, navigation, main content, complementary sidebars, and footer allow screen reader users to jump directly to key areas of a page. Without proper landmarks, users may be forced to navigate line-by-line, increasing effort, especially on long or complex pages.

How to fix this issue

Use semantic HTML landmarks: <header>, <nav>, <main>, <aside>, and <footer>. If multiple landmarks of the same type exist (e.g., two navs), give them unique accessible names using aria-label. Ensure there is exactly one main landmark.

Automated detection · Manual review recommended

Developer guidance

In layout or app shell components, always include semantic regions. Avoid wrapping landmarks inside one another (e.g., <main> inside <header>). Check for duplicate main or banner landmarks. When using two navs (e.g., main nav + footer nav), label them distinctly.

Code examples

Incorrect Implementation

<div id='header'>Site Title</div>
<div class='links'>...</div>
<div>Content</div>

Correct Implementation

<header role='banner'>Site Title</header>
<nav aria-label='Primary navigation'>...</nav>
<main>Main content goes here</main>
<footer role='contentinfo'>© 2025</footer>

Real-World Examples

Before

<div class='top-bar'>...</div>
<div class='content'>...</div>

After

<header class='top-bar'>...</header>
<main class='content'>...</main>

CSS Example (Guidance)

/* Landmarks are structural — style them however you want */
header, main, nav, aside, footer {
  display: block;
}

Manual testing

  1. 1. Open the page and turn on a screen reader.
  2. 2. Use landmark navigation shortcuts:
  3. • NVDA / JAWS: D
  4. • VoiceOver (macOS): VO + U → Landmarks
  5. 3. Confirm the following exist and are recognizable:
  6. • One <header> or role='banner'
  7. • One <main> or role='main'
  8. • Optional <nav>, <aside>, <footer>
  9. 4. If multiple instances of the same region type exist, check they have unique aria-label values.
  10. 5. Ensure no landmark is nested incorrectly (e.g., <main> should not be inside <header>).
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance