ARIA-Landmarks: Die Seitenstruktur für Screenreader

Kurz erklärt: Landmarks sind die Haupt-Bereiche einer Webseite (Header, Navigation, Hauptinhalt, Footer), die Screenreader-Nutzern schnelle Orientierung ermöglichen. Sie werden entweder über HTML5-Tags (<header>, <nav>, <main>, <footer>) oder ARIA-Rollen (role="banner", "navigation", "main", "contentinfo") implementiert.

Landmarks sind für Screenreader-Nutzer das, was Kapitel-Überschriften für Bücher sind: sie erlauben gezieltes Springen. Ohne Landmarks wird eine Seite zur endlosen Wand von Inhalten.

Die wichtigsten Landmark-Tags

<header> = Landmark "banner" – Seitenkopf mit Logo, Hauptnavigation.
<nav> = Landmark "navigation" – Navigationslisten.
<main> = Landmark "main" – Hauptinhalt (nur EINMAL pro Seite).
<aside> = Landmark "complementary" – Sidebar.
<footer> = Landmark "contentinfo" – Seitenfuß.
<section> = Landmark "region" (mit aria-label) – benannte Inhaltssektion.
<form role="search"> = Landmark "search" – Suchfelder.

Goldene Regeln

Genau ein

pro Seite.
Mehrere