Landmark roles mit HTML5 und ARIA veröffentlicht in 2012/2016

Konzept für die Seitenregionen

Mit Accessible Rich Internet Applications (ARIA) 1.0 wurden neue Möglichkeiten der strukturellen Navigation eingeführt. Mit den landmark roles kann eine Webseite in verschiedene Regionen unterteilt und für Hilfsmittel wie Screenreadernutzer ansteuerbar gemacht werden.

Es gibt insgesamt acht verschiedene Rollen, um ansteuerbare Regionen zu kennzeichnen, wobei fünf der acht Rollen auch mit HTML-Elementen zugewiesen werden können. Die Rollen werden nachfolgend vorgestellt.

Fünf Schritte zu einer guten strukturellen Navigation

Wenn Regionen für eine Webseite festgelegt werden, dann sollten sie auch unter Intern: Berücksichtigung der strukturellen Navigation bestimmt werden. Allzu oft werden die Landmark roles — ob mit dem role-Attribut oder mit HTML-Elementen — über eine Webseite "gestreut", unnötig verschachtelt und vor allem nicht bezeichnet, was im Extremfall dazu führt, dass die Seite weniger zugänglich ist als zuvor. Folgende 5 Punkte sollten bei der Bestimmung von Seitenregionen beachtet werden:

1. Regionen einer Webseite identifizieren

Zunächst sollten die visuell wahrnehmbaren Regionen einer Seitenvorlage ermittelt werden. Die einzelnen Regionen sollten zusammenhängende oder miteinander verwandte Inhalte enthalten. Die Regionen sollten auch großzügig (und nicht kleinteilig) sein und dabei keine Inhalte auslassen. Diese Herangehensweise darf rekursiv erfolgen, d.h. nach einer Einteilung der Seiteninhalte kann für einzelne Regionen eine weitere Unterteilung vorgenommen werden, aber für die Praxis (Navigation zu den einzelnen Regionen einer Seite per Tastatur) sollte jede überflüssige Region vermieden werden. Beispielsweise wenn eine Navigationsregion von weiteren Links gefolgt wird, dann dürfen die Links selbstverständlich in der Navigationsregion stehen.

Die grobe Einteilung einer Seite wird durch verschiedene Farben und knappen Text dargestellt

Für die Unterteilung der Webseite in Regionen ist es hilfreich, sich die einzelnen Regionen als Seitenabschnitte vorzustellen. Es sollte die Erstellung eines Inhaltsverzeichnisses möglich sein, die die Erschließung der zusammenhängenden Webseiteninhalte möglich macht. Am Ende des Prozesses soll der (Screenreader-)Nutzer von Bereich zu Bereich springen oder sich ein Inhaltsverzeichnis der Seite anzeigen lassen können.

2. Jede Region in einem eigenen HTML-Element fassen

Nachdem die Regionen festgelegt wurden, müssen sie auch softwaretechnisch identifizierbar sein. Im Allgemeinen wird dieser Schritt ohnehin befolgt: Die einzelnen Regionen der Seite benötigen ein eigenes Element wie ein DIV, das anschließend die Inhalte des Bereichs als einer Region zugehörig identifizieren wird.

<div id="nav">
  <!-- ... Die Navigationseinträge ... -->
</div>

Für fünf landmark roles gibt es HTML-Elemente, die statt eines DIV-Elements eingesetzt werden können. Es handelt sich dabei um die ASIDE-, FOOTER-, HEADER-, MAIN- und NAV-Elemente.

3. Bestimmung der Rollen

Jetzt, wo die Seite in Regionen unterteilt ist, muss dem Browser auch mitgeteilt werden, welche Rolle die einzelnen Regionen haben. Nach der ARIA-Spezifikation sind acht verschiedene Rollen festgelegt.

Hinweis: Obwohl die HTML-Spezifikation für die ASIDE-, FOOTER-, HEADER-, MAIN- und NAV-Elemente eine Rolle vorgibt, so variiert die Extern: Kompatibilität mit Screenreadern. Es empfiehlt sich deshalb, für alle Rollen, die mit HTML zugewiesen werden, weiterhin eine Rolle explizit mit dem role-Attribut zuzuweisen.

Rollen für Regionen
Rolle (ARIA)HTML-ElementZuordnungsmöglichkeiten
role="application"Eine Region, die als Webanwendung deklariert wird (im Gegensatz zu einem Webdokument). Es gibt kaum Anwendungsfälle, denn die meisten Komponenten sind Widgets, die mit widget roles (und nicht landmark roles zu kennzeichnen sind). Beachten Sie dabei Intern: Die Besonderheit der ARIA-Rolle application.
role="banner"HEADEREine Region, die Informationen über einen Abschnitt der Seite enthält (das kann auch die gesamte Webseite sein). Das HTML-Element kann mehrfach pro Seite vorkommen; es erhält die Rolle eines Banners.
role="contentinfo"FOOTEREine Region, die Informationen über einen Abschnitt der Seite enthält (das kann auch die gesamte Webseite sein). Das HTML-Element kann mehrfach pro Seite vorkommen und enthält typischerweise Informationen zum Abschnitt wie z.B. Autor, Copyright-Informationen oder Links zu verwandten Dokumenten; es erhält die Rolle einer Inhaltsangabe.
role="complementary"ASIDEEin Abschnitt der Webseite, der zwar mit dem Inhalt verwandt sein kann, aber aussagekräftig bleibt, wenn er vom eigentlichen Abschnitt getrennt wird. Die Inhalte erhalten die Rolle einer ergänzenden Region.
role="form"Eine Region, die eine Ansammlung von Formularelementen und Anweisungen enthält, die als Ganzes zu einem Formular kombiniert wird. Für diese Rolle gibt es keine Entsprechung in HTML.
role="main"MAINDer Hauptinhalt eines Dokuments. Die Rolle darf nur einmal pro Seite vorkommen.
role="navigation"NAVEin Abschnitt der Webseite mit Links, um zu anderen Webseiten oder imnerhalb einer Webseite zu navigieren. Nicht alle Abschnitte mit Links müssen mit der Rolle "navigation" identifiziert werden; wenn FOOTER oder ASIDE besser geeignet sind, dann kann auf NAV verzichtet werden.
searchEine Region, die eine Suchfunktion einschließlich etwaiger Anweisungen enthält. Für diese Rolle gibt es keine Entsprechung in HTML.

4. Falls unbedingt nötig, autorendefinierte Regionen anlegen

Wenn es einzelne Regionen einer Seite gibt, die mit den landmark roles nicht oder nicht richtig identifiziert werden können, so können document structure roles vergeben werden. Es gibt einige spezifische Rollen wie "article" oder "toolbar", und eine generische Rolle "region". Generell sind die document structure roles nicht mit der Tastatur ansteuerbar, sondern sie fügen der Webseite zusätzliche Semantik hinzu.

Für die Rollen "article" und "region" bietet HTML die Elemente ARTICLE und SECTION. Beide Elemente waren in der Vergangenheit etwas problematisch. Teilweise werden sie als Regionen behandelt (obwohl sie es nicht sein sollten), manchmal greifen Algorithmen zur Neuberechnung der Überschriftenebenen und manchmal "vererbt" sich die Rolle von SECTION auf enthaltene Formularelemente. In jedem Fall sollte SECTION vorsichtig eingesetzt werden. Bei ARTICLE sollte der Einsatz nur im Bedarfsfall eingesetzt werden. Beide Elemente verursachen unnötige "Nebengeräusche".

5. Jede Region eindeutig bezeichnen

Jede Region einer Webseite sollte eindeutig identifizierbar sein. Wenn eine bestimmte Rolle nur einmal auf einer Webseite vergeben wird (was für die Rolle "main" in jedem Fall und für die Rollen "banner" und "contentinfo" nach der ARIA-Spezifikation ebenfalls gelten sollte) so kann auf eine autorenseitige Beschriftung verzichtet werden.

Eine Landmark role wie "navigation" kann mehrfach pro Seite vorkommen. Wenn eine Seite über eine Hauptnavigation, eine Fußleiste, eine Brotkrumennavigation und andere Navigationsbereiche verfügt, besitzen sie alle die gleiche Rolle und werden alle z.B. als "Navigationsregion" in einem Screenreader identifiziert. Regionen sollten deshalb Zeile190: DB-Eintrag ungültig: - Zeile: 190