ARIA-Landmark

Ein Landmark ist ein ausgezeichneter Strukturbereich einer Webseite, der Nutzenden von Screenreadern die Orientierung und Navigation erleichtert. Landmarks teilen eine Seite in logische, schnell erreichbare Abschnitte ein und sind damit essentiell für die barrierefreie Navigation.

Die wichtigsten HTML5-Landmarks und ihre ARIA-Entsprechungen:

• <header> – role="banner"

• <nav> – role="navigation"

• <main> – role="main"

• <aside> – role="complementary"

• <footer> – role="contentinfo"

• <search> – role="search"

Wichtige Regeln für Landmarks:

• Jede Seite braucht genau einen <main>-Bereich

• Landmarks müssen eindeutig identifizierbar sein

• Bei mehreren gleichen Landmarks (z.B. zwei Navigationen) Label vergeben

• Keine leeren Landmark-Bereiche erstellen

• Logische Verschachtelung beachten

Beispiel für die Kennzeichnung mehrerer Navigationen:

<nav aria-label="Hauptmenü"> <!-- Hauptnavigation --> </nav>

<nav aria-label="Unterseiten"> <!-- Untermenü --> </nav>

Für die Entwicklung bedeutet dies:

• HTML5-Elemente statt ARIA-Rollen bevorzugen

• Aussagekräftige aria-label vergeben

• Landmarks nicht unnötig verschachteln

• Struktur auf allen Seiten konsistent halten

• Skip-Links zu wichtigen Landmarks anbieten

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.