ARIA-Landmark

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 HTML-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:

• Semantische HTML-Elemente (z. B. <main>, <nav>) verwenden anstatt ARIA-Rollen, wenn möglich.

• Jede 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 eindeutigen aria-label versehen 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>

(vorgelesen als »Hauptmenü Navigation«)

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

(vorgelesen als »Unterseiten Navigation«)

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.