Landmark Roles

Landmark Roles (auch: Landmark-Regionen) sind semantische Rollen im HTML bzw. WAI-ARIA, mit denen Entwicklerinnen bestimmte Bereiche einer Website eindeutig kennzeichnen. Sie dienen dazu, Navigation und Orientierung – besonders für Screenreader-Nutzerinnen – zu verbessern, indem sie die Struktur einer Seite erkennbar machen.

Typische Landmark Roles

Rolle Zweck
banner Kopfbereich der Seite (meist Logo + Slogan)
navigation Haupt- oder Seitennavigation
main Hauptinhalt der Seite (nur einmal pro Seite!)
complementary Zusatzinhalt, z. B. Sidebar
region Allgemeiner Inhaltsbereich mit eigener Überschrift
form Ein zusammengehörendes Formular
search Suchfunktion der Seite
contentinfo Fußbereich mit Impressum, Copyright etc.

Warum Landmark Roles wichtig sind

  • Effiziente Navigation: Screenreader ermöglichen es, direkt von Landmark zu Landmark zu springen.

  • Klarere Seitenstruktur: Auch für Entwickler:innen, SEO und Testing ist die Struktur leichter nachvollziehbar.

  • Barrierefreiheit: WCAG empfiehlt den Einsatz von Landmark Roles zur Verbesserung der Seitenorientierung.

Best Practices

  • Nur eine main-Rolle pro Seite – und sie sollte den Hauptinhalt der Seite umschließen.

  • Navigation klar auszeichnen: Nutze nav mit role="navigation" oder setze gleich auf das semantische <nav>.

  • Keine Dopplungen ohne Zweck: Vermeide mehrere gleichartige Landmark Roles ohne Unterscheidung (z. B. zwei navigation ohne Label).

  • Landmarks benennen: Nutze aria-label oder aria-labelledby, um ähnliche Regionen unterscheidbar zu machen (z. B. „Hauptnavigation“, „Fußnavigation“).

Tipp für Entwickler:innen:

Nutze den Landmark-Filter in Screenreadern wie NVDA oder Tools wie dem Firefox Accessibility Inspector, um schnell zu überprüfen, ob die Landmark-Struktur sinnvoll umgesetzt ist.