Definition: A landmark is a region of a page with a defined role – such as the header, navigation, main content or footer. Screen readers list a page's landmarks and jump straight to them with a key press, so users reach the main content without listening to the navigation every time [1][2].
German: Landmark · Also: ARIA landmark, landmark role · Last reviewed: 27 September 2026
The landmark roles
Most landmarks come from the right HTML elements, with no ARIA at all [1][3]:
| HTML | Role | Used for |
|---|---|---|
<header> | banner | site header with logo, search, service links |
<nav> | navigation | main menu, breadcrumbs, section navigation |
<main> | main | the main content – once per page |
<aside> | complementary | supporting content, such as an info box |
<footer> | contentinfo | footer with legal notice and contact |
<form> with a name | form | an important form |
<section> with a name | region | a named section |
role="search" | search | the search |
<header> and <footer> only become landmarks when they belong to the whole page, not when they sit inside an <article>, <aside>, <nav>, <section> or <main>.
Who benefits
Screen reader users jump from region to region with a single key – D in NVDA, for example – or call up a list of all landmarks. In WebAIM's survey of screen reader users (2023/24), 31.8% said they navigate by landmarks whenever they are available or often [4]. Headings are even more popular, so landmarks and headings complement each other.
Landmarks are one of the recognised techniques for WCAG 2.4.1 Bypass Blocks [5]. Sighted keyboard users get little from them, though: browsers offer no way to jump between landmarks without an extension. For them, a skip link still matters.
In code
<!-- Only divs: no landmarks -->
<div class="top">…</div>
<div class="menu">…</div>
<div class="content">…</div>
<div class="bottom">…</div><header>…</header>
<nav aria-label="Main">…</nav>
<main id="content">…</main>
<footer>…</footer>Common mistakes
- No
<main>, or several visible ones. The most important jump target is then missing. - Content outside every landmark. Text that sits in no region is easily missed when jumping.
- Several
<nav>elements without their own names. "Navigation" three times does not help. Name each one, for examplearia-label="Main"andaria-label="Footer". - Too many landmarks. Every named
<section>becomes a region; a list of twenty is as unhelpful as no list at all. Only name sections someone would want to jump to. - The role repeated in the name:
<nav aria-label="Navigation">is announced as "Navigation navigation".
How Reviseberg handles it
Reviseberg checks every page with axe-core. The rules region, landmark-one-main, landmark-unique, landmark-no-duplicate-banner, landmark-no-duplicate-contentinfo and landmark-no-duplicate-main find missing, duplicated and indistinguishable landmarks. axe-core files these rules as best practice and Reviseberg follows it: they appear as "best practice, no WCAG criterion" and never fail a criterion – 1.3.1 included. Whether the regions are sensibly drawn and well named is something no rule can decide – that stays a question for manual testing.
Related terms
Skip link · Semantic HTML · Heading structure · Screen reader · ARIA