Landmarks (Orientierungspunkte) sind Bereiche einer Webseite, die für assistive Technologien als Regionen ausgezeichnet sind. Screenreader-Nutzer können sich eine Liste aller Landmarks anzeigen lassen oder per Taste (z. B. „D“ bei NVDA, „R“ bei JAWS) direkt zum Hauptinhalt oder zur Navigation springen.
Die wichtigsten Landmarks
<header>→ banner: Kopfbereich der Seite<nav>→ navigation: Menüs<main>→ main: Hauptinhalt (genau einmal pro Seite)<aside>→ complementary: ergänzende Inhalte<footer>→ contentinfo: Fußbereich<form aria-label="…">→ form,<search>bzw.role="search"→ search<section aria-label="…">→ region, nur mit Namen
Best Practices
- Alle Inhalte sollten innerhalb einer Landmark liegen.
- Mehrere gleiche Landmarks unterscheidbar benennen:
<nav aria-label="Hauptmenü">,<nav aria-label="Brotkrumen">. - Native HTML5-Elemente bevorzugen statt
role-Attribute. - Nicht zu viele Landmarks – sonst geht der Überblick verloren.
- Landmarks ergänzen Überschriften und Skip-Links, ersetzen sie aber nicht.
Häufige Fragen zu Landmarks
Sind Landmarks Pflicht nach WCAG?
Sie sind eine anerkannte Technik zur Erfüllung von 1.3.1 und 2.4.1 („Blöcke umgehen“). Ohne Landmarks ist eine gute Struktur schwerer zu erreichen.
Wie prüfe ich die Landmarks meiner Seite?
Mit Browser-Erweiterungen wie „Landmark Navigation via Keyboard“, WAVE oder der Screenreader-Elementliste.
Verwandte Begriffe: Semantisches HTML, Skip-Links, Header, Rolle, Schnellnavigation