Landmark-Rollen benennen die wiederkehrenden Bereiche einer Seite, also Kopfbereich, Navigation, Hauptinhalt, Randspalte und Fußzeile. Hilfsmittel springen anhand dieser Rollen durch die Seite.
- Landmark-Rollen
Rollen, die die wiederkehrenden Bereiche einer Seite benennen.
Beispiel: „Über die Landmark-Rollen springt ein Screenreader mit einem Befehl zum Hauptinhalt.“Auch: ARIA-Landmarks, Landmarks, Bereichsrollen. Gemeint sind acht Rollen, die den Aufbau einer Seite beschreiben und nicht ihr Aussehen.
Abgrenzung zum Sprunglink: Der ist ein sichtbarer Verweis für Tastaturnutzer. Die Landmarks wirken ohne sichtbares Element und nur für Hilfsmittel. Beides zusammen deckt beide Gruppen ab.
Welche es gibt
Die Landmark Regions des ARIA Authoring Practices Guide führen acht Rollen und die HTML-Elemente auf, aus denen sie entstehen: banner aus header, navigation aus nav, main aus main, complementary aus aside, contentinfo aus footer, search aus search, form aus form und region aus section.
Drei davon haben Bedingungen. Header und footer tragen ihre Rolle nur, wenn sie unmittelbar im body stehen und nicht innerhalb eines Artikels. Section und form bekommen ihre Rolle erst, wenn sie eine Beschriftung haben.
Wozu sie dienen
Zum Überspringen und zum Ansteuern. Ein Screenreader kann die Bereiche auflisten und direkt zu einem springen, womit das wiederkehrende Menü am Seitenanfang keine Hürde mehr ist. Genau dafür verlangt Erfolgskriterium 2.4.1 auf Stufe A einen Weg, wiederkehrende Blöcke zu überspringen.
Dazu kommt die Struktur selbst. Ohne Landmarks ist eine Seite für ein Hilfsmittel eine lange Folge von Elementen; mit ihnen hat sie einen Grundriss, der sich in einem Satz überblicken lässt.
Was dabei schiefgeht
Mehrere Bereiche derselben Rolle ohne Beschriftung. Hat eine Seite drei nav-Elemente, meldet das Hilfsmittel dreimal „Navigation“, und niemand weiß, welche davon die Hauptnavigation ist. Jede weitere braucht deshalb eine eigene Beschriftung.
<nav aria-label="Haupt">…</nav>
<nav aria-label="Brotkrumen">…</nav>
<nav aria-label="Fußzeile">…</nav>In die Beschriftung gehört dabei nicht das Wort Navigation, sonst sagt die Ansage „Site Navigation Navigation“. Und die Rolle gehört an das richtige Element: Ein div mit role="navigation" leistet dasselbe wie ein nav, ist aber unnötig.