Konzepte

Landmark

Auch: ARIA landmark, landmark region

Ein durch ein HTML5-Element oder eine ARIA-Rolle gekennzeichneter Seitenbereich, zu dem Screenreader-Nutzende direkt navigieren können. Landmarks (banner, navigation, main, complementary, contentinfo) bilden das strukturelle Gerüst einer Seite.

Landmarks sind seitenweite Bereiche, zwischen denen Screenreader-Nutzende direkt wechseln können — über dedizierte Tastaturkürzel. Sie sind das seitenstrukturelle Äquivalent von Kapitelgliederungen in einem Buch: Sehende Nutzende erfassen die Struktur anhand visueller Hinweise (die sichtbare Kopfzeile oben, die Seitenleiste rechts, die Fußzeile unten); Screenreader-Nutzende erhalten die Struktur über Landmarks.

Die Standard-Landmarks

Jeder der folgenden Landmarks ist sowohl ein HTML5-Element als auch eine ARIA-Rolle. Das HTML5-Element sollte bevorzugt werden; die ARIA-Rolle existiert für Fälle, in denen das native Element nicht verwendet werden kann.

BereichHTML5-ElementARIA-Rolle
Seitenbanner (Logo, Hauptnavigation)<header> (Seitenanfang)role="banner"
Hauptnavigation<nav>role="navigation"
Hauptinhalt<main>role="main"
Ergänzender Inhalt (Seitenleiste)<aside>role="complementary"
Seitenfußzeile (Copyright, sekundäre Links)<footer> (Seitenende)role="contentinfo"
Suche<search> (HTML5) oder <form role="search">role="search"
Generischer benannter Bereich—role="region" (mit Label)
Formular (kein Suchformular)<form>role="form"

<header> und <footer> werden nur dann als banner bzw. contentinfo erkannt, wenn sie direkte Kinder von <body> sind. Ein <header> innerhalb eines <article> ist lediglich ein Artikel-Header — er wird kein Banner-Landmark.

Wie Screenreader-Nutzende Landmarks verwenden

Jeder bedeutende Screenreader verfügt über einen Landmark-Navigationsmodus:

  • JAWS: R wechselt vorwärts durch Landmarks; Shift+R rückwärts; Insert+F7 öffnet eine Liste aller Landmarks.
  • NVDA: D wechselt vorwärts durch Landmarks; Shift+D rückwärts; Insert+F7 öffnet die Elementliste.
  • VoiceOver (macOS): VO+U öffnet den Rotor; zu „Landmarks“ drehen; mit den Pfeiltasten navigieren.
  • VoiceOver (iOS): Zwei-Finger-Drehung zu „Landmarks“ im Rotor; mit Wischen hoch/runter navigieren.
  • TalkBack (Android): Wischen hoch dann rechts öffnet das Lesesteuerungsmenü; „Landmarks“-Modus auswählen; mit Wischen rechts navigieren.

Eine Seite mit gut gesetzten Landmarks gibt Screenreader-Nutzenden ein Inhaltsverzeichnis mit einem einzigen Tastendruck.

Häufige Landmark-Fehler

  • Kein <main>. Ohne ein Haupt-Landmark müssen Screenreader-Nutzende bei jedem Seitenaufruf die gesamte Kopfzeile durchtabben. Jede Seite sollte genau ein <main> enthalten.
  • Mehrere unbeschriftete <nav>-Elemente. Eine Seite mit Hauptnavigation und Seitenleistennavigation, jeweils als <nav>, lässt Screenreader-Nutzende zwischen zwei ununterscheidbaren „Navigation“-Einträgen wählen. Jede <nav> sollte mit aria-label beschriftet werden: <nav aria-label="Hauptnavigation">, <nav aria-label="Seiteninhalt">.
  • role="banner" auf einem inneren Element. Ein <header> innerhalb von <main> oder <article> ist kein Banner, sondern ein Artikel-Header. Das Hinzufügen von role="banner" ist hier falsch.
  • Doppelte Landmarks. Zwei <main>-Elemente auf einer Seite verstoßen gegen die Regel „landmark-no-duplicate-main“. Axe und Lighthouse erkennen diesen Fehler.
  • Region ohne Label. role="region" erfordert aria-label oder aria-labelledby. Andernfalls ignorieren Screenreader den Bereich.

Landmark-Prüfung

Die Seite wird in einem modernen Screenreader geöffnet, der Landmark-Listen-Shortcut gedrückt und Folgendes überprüft:

  1. Es gibt genau ein Banner, ein Main, ein Contentinfo.
  2. Jede <nav> hat einen eindeutigen zugänglichen Namen.
  3. Die Landmark-Struktur entspricht der visuellen Seitenstruktur.

Eine Landmark-Liste, die „banner, navigation, navigation, main, complementary, contentinfo“ ohne weitere Beschriftungen ausgibt, bedeutet, dass Nutzende die beiden Navigationen nicht unterscheiden können. Dies muss behoben werden.