Definition: Ein Landmark ist ein Bereich einer Seite mit einer festen Rolle – etwa Kopfbereich, Navigation, Hauptinhalt oder Fußbereich. Screenreader listen die Landmarks einer Seite auf und springen auf Tastendruck direkt hinein. So erreicht man den Hauptinhalt, ohne jedes Mal die Navigation anzuhören [1][2].
Englisch: Landmark · Auch: ARIA-Landmark, Landmark-Rolle · Zuletzt geprüft: 27. September 2026
Die Landmark-Rollen
Meist entstehen Landmarks ganz ohne ARIA, aus den passenden HTML-Elementen [1][3]:
| HTML | Rolle | Wofür |
|---|---|---|
<header> | banner | Kopfbereich mit Logo, Suche, Service-Links |
<nav> | navigation | Hauptmenü, Brotkrumen, Seitennavigation |
<main> | main | der Hauptinhalt – einmal pro Seite |
<aside> | complementary | ergänzende Inhalte, etwa ein Infokasten |
<footer> | contentinfo | Fußbereich mit Impressum und Kontakt |
<form> mit Namen | form | ein wichtiges Formular |
<section> mit Namen | region | ein benannter Abschnitt |
role="search" | search | die Suche |
<header> und <footer> werden nur dann zu Landmarks, wenn sie nicht in einem <article>, <aside>, <nav>, <section> oder <main> stecken, sondern zur ganzen Seite gehören.
Wer davon profitiert
Wer einen Screenreader nutzt, springt mit einer Taste von Bereich zu Bereich – in NVDA etwa mit D – oder ruft eine Liste aller Landmarks auf. In der WebAIM-Umfrage unter Screenreader-Nutzenden (2023/24) gaben 31,8 % an, immer oder oft über Landmarks zu navigieren, wenn es sie gibt [4]. Überschriften sind noch beliebter. Landmarks und Überschriften ergänzen sich deshalb.
Landmarks gehören zu den anerkannten Techniken für WCAG 2.4.1 Blöcke umgehen [5]. Sehende Tastaturnutzende haben davon aber wenig: Browser bieten ohne Erweiterung keine Sprungfunktion zu Landmarks. Für sie bleibt der Skip-Link wichtig.
Im Code
<!-- Nur divs: keine Landmarks -->
<div class="top">…</div>
<div class="menu">…</div>
<div class="content">…</div>
<div class="bottom">…</div><header>…</header>
<nav aria-label="Hauptmenü">…</nav>
<main id="inhalt">…</main>
<footer>…</footer>Häufige Fehler
- Kein
<main>oder mehrere sichtbare. Dann fehlt das wichtigste Sprungziel. - Inhalt außerhalb jeder Landmark. Text, der in keinem Bereich steht, übersieht man beim Springen leicht.
- Mehrere
<nav>ohne eigenen Namen. Drei Mal „Navigation“ hilft nicht. Geben Sie jeder einen Namen, etwaaria-label="Hauptmenü"undaria-label="Fußzeile". - Zu viele Landmarks. Jede benannte
<section>wird zur Region. Eine Liste mit zwanzig Einträgen ist so unübersichtlich wie gar keine Liste. Benennen Sie nur Abschnitte, zu denen jemand gezielt springen möchte. - Das Wort im Namen doppelt:
<nav aria-label="Navigation">wird als „Navigation Navigation“ angesagt.
Wie Reviseberg damit umgeht
Reviseberg prüft jede Seite mit axe-core. Die Regeln region, landmark-one-main, landmark-unique, landmark-no-duplicate-banner, landmark-no-duplicate-contentinfo und landmark-no-duplicate-main finden fehlende, doppelte und nicht unterscheidbare Landmarks. axe-core führt diese Regeln als Best Practice, und Reviseberg übernimmt das: Sie erscheinen als „Best Practice, kein WCAG-Kriterium“ und lassen kein Kriterium scheitern – auch nicht 1.3.1. Ob die Bereiche sinnvoll geschnitten und gut benannt sind, kann keine Regel entscheiden – das bleibt eine Frage für die manuelle Prüfung.
Verwandte Begriffe
Skip-Link · Semantisches HTML · Überschriftenstruktur · Screenreader · ARIA