Ein Landmark ist eine ARIA-Rolle, die die Hauptbereiche einer Webseite, etwa Kopfbereich, Navigation, Hauptinhalt und Fußbereich, für assistive Technologien kenntlich macht. Die häufigsten Landmark-Rollen sind banner, navigation, main, complementary und contentinfo. Screenreader-Nutzer bewegen sich über die Landmark-Liste schnell durch eine Seite. Die programmatische Bestimmbarkeit der Seitenstruktur hängt mit dem WCAG-Erfolgskriterium 1.3.1 zusammen.
Landmark-Rollen sind das Gegenstück zum visuellen Überfliegen einer Seite: Sehende Nutzer unterscheiden Menü, Hauptinhalt und Fußbereich auf einen Blick, Screenreader-Nutzer erhalten dieselbe Karte über Landmarks. Die Kernrollen sind banner (Kopfbereich), navigation (Menüs), main (Hauptinhalt), complementary (Nebeninhalt), contentinfo (Fußbereich), search und form. Moderne HTML5-Elemente erzeugen die meisten dieser Rollen automatisch: Werden header, nav, main, aside und footer an der richtigen Stelle eingesetzt, ist kein zusätzliches role-Attribut nötig. Screenreader machen aus Landmarks ein Navigationswerkzeug: Nutzer öffnen die Landmark-Liste oder springen mit Kurzbefehlen von Bereich zu Bereich.
Damit das funktioniert, gelten einige Regeln: Eine Seite sollte genau ein sichtbares main haben, sämtlicher Inhalt sollte innerhalb einer Landmark-Region liegen, und kommt dieselbe Rolle mehrfach vor, etwa zwei Navigationsbereiche, braucht jede Instanz einen unterscheidbaren Namen per aria-label. Die programmatische Bestimmbarkeit der Struktur ist Gegenstand des WCAG-Erfolgskriteriums 1.3.1 (Info und Beziehungen). Der praktische Ansatz: zuerst semantisches HTML, also header, nav, main und footer statt div-Stapeln; das role-Attribut bleibt die Ausnahme. Die Kontrolle ist einfach: Landmark-Liste des Screenreaders öffnen und prüfen, ob die Karte der Seite Sinn ergibt; automatische Scanner finden zudem Probleme wie ein fehlendes main oder Inhalte außerhalb jeder Landmark.
Häufig gestellte Fragen
Wie viele main-Landmarks sollte eine Seite haben?
Es sollte genau ein sichtbares main geben. Die main-Region markiert den Bereich mit dem eigentlichen Thema der Seite; mehrere sichtbare main-Bereiche machen die Erwartung 'zum Hauptinhalt springen' für Screenreader-Nutzer mehrdeutig. Kopfbereich, Menüs und Fußbereich liegen außerhalb von main. Auch in Single-Page-Anwendungen gilt die Regel bei jedem Ansichtswechsel: Es sollte immer nur ein main aktiv sein.
Sollte man für Landmarks HTML5-Elemente oder das ARIA-role-Attribut verwenden?
Semantische HTML5-Elemente haben immer Vorrang: header, nav, main, aside und footer erzeugen die entsprechenden Landmark-Rollen automatisch und ohne Pflegeaufwand. Das role-Attribut ist die Rückfalloption für Altcode oder eigene Komponenten, wo kein semantisches Element möglich ist. Beides am selben Element zu doppeln ist unnötig; entscheidend ist, mehrfach vorkommenden Rollen per aria-label einen unterscheidbaren Namen zu geben.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.