Ein Landmark ist ein strukturierender Bereich innerhalb einer Webseite, der mithilfe von ARIA-Attributen oder semantischen HTML5-Elementen ausgezeichnet wird. Landmarks gliedern eine Seite in logisch benannte Abschnitte und ermöglichen es Nutzenden von Screenreadern, gezielt zwischen diesen Bereichen zu navigieren. Sie sind ein essentieller Bestandteil barrierefreier Webentwicklung und erleichtern insbesondere die Orientierung auf komplexen Seiten.
Die wichtigsten HTML5-Landmarks und ihre ARIA-Entsprechungen:
<header>–role="banner": Website-Kopfbereich (Logo, Hauptüberschrift)<nav>–role="navigation": Navigationsbereiche (z. B. Hauptmenü)<main>–role="main": Hauptinhaltsbereich einer Seite<aside>–role="complementary": Zusätzliche Informationen, z. B. Seitenleisten<footer>–role="contentinfo": Fußbereich der Seite
Wichtige Regeln für Landmarks:
Verwende semantische HTML5-Elemente (z. B.
<main>,<nav>) anstatt ARIA-Rollen, wenn möglich – Screenreader erkennen diese automatisch.Jeder Seite sollte genau ein
<main>-Element enthalten. Mehrere würden den Accessibility Tree verfälschen.Landmarks müssen eindeutig identifizierbar sein
Wenn mehrere Landmarks desselben Typs vorhanden sind (z. B. mehrere
<nav>-Bereiche), sollte jedes Element mit einem eindeutigenaria-labelversehen werden, um den Zweck zu benennen.Keine leeren Landmark-Bereiche erstellen
Logische Verschachtelung beachten, z. B. kein
<nav>innerhalb von<main>, wenn es sich um Hauptnavigation handelt.
Beispiel für die Kennzeichnung mehrerer Navigationen:
<nav aria-label="Hauptmenü"> <!-- Hauptnavigation --> </nav>
<nav aria-label="Unterseiten"> <!-- Untermenü --> </nav>
Testing der Landmark-Struktur:
Mit Screenreader testen
Landmarks-Übersicht prüfen
Labels auf Eindeutigkeit kontrollieren
Verschachtelung überprüfen
Eine durchdachte Landmark-Struktur ist fundamental für die Orientierung auf einer Webseite und ermöglicht Nutzenden von assistiven Technologien eine effiziente Navigation durch die Inhalte.
