Die Navigation über Seitenregionen veröffentlicht in 2012zuletzt bearbeitet in 2024

In der Anfangszeit des Webs hatte die Webentwicklung die strukturelle Navigation mit unterschiedlichen Techniken zu realisieren versucht. Erst wenn Webseiten gut strukturiert sind, können Assistenztechnologien wie Screenreader gut von Inhalt zu Inhalt oder von Bereich zu Bereich innerhalb einer Webseite navigieren. Alle Techniken waren letztlich "Krücken" bis HTML 4.01 durch den HTML Living Standard abgelöst wurde. Mit HTML können Regionen einer Webseite bestimmt werden und Assistenztechnologien können diese ansteuern oder auflisten.

Die "klassische" strukturelle Navigation

Die strukturelle Navigation ist eine erweiterte Tastaturnavigation insbesondere für Screenreadernutzer (und mit entsprechenden Plug-Ins auch für andere Nutzer), die über die Verwendung der Tab-Taste hinausgeht. Während mit der Tab-Taste aktive Elemente wie Links und Formularelemente angesprungen werden können, kann mit der strukturellen Navigation über die Strukturmerkmale einer Webseite navigiert werden. So ist es vor allem in Screenreadern möglich, zur nächsten Überschrift oder zum nächsten Absatz mit einem Tastendruck zu springen.

Wer eine Maus nicht nutzen kann steht auf Seiten mit vielen aktiven Elementen vor einem Problem. Wenn beispielsweise ein Formular ausgefüllt werden soll und vor dem Formular etliche Links stehen, dann muss die Tab-Taste nicht selten sehr häufig betätigt werden, um den Fokus in das erste Formularfeld zu setzen. Die Web Content Accessibility Guidelines (WCAG) 2.2 bzw. Barrierefreie Informationstechnik-Verordnung – BITV 2.0 geben deshalb vor, dass Navigationsbereiche einer Webseite per Tastatur übersprungen werden sollen. Die Richtlinien lassen dabei offen, ob ein solcher Mechanismus über die strukturelle Navigation oder mit Sprunglinks erfolgen soll.

Um Navigations- oder Werkzeugleisten überspringbar zu machen gab es verschiedene Techniken:

1. Der gezielte Einsatz von Überschriften vor einzelnen Inhaltsblöcken stellte meist die beste Technik dar, da zusätzlich zur Struktur mit dem Überschriftentext auch eine Bezeichnung des nachfolgenden Inhalts berücksichtigt werden konnte. Screenreader können Überschriften per Tastendruck (meist die Taste H) nacheinander ansteurn. Allerdings wird diese Technik in der Praxis nicht einheitlich umgesetzt. Die einen setzen für die strukturelle Navigation h1-, die nächsten h2- und manche h3-, h4-, h5- oder h6-Elemente ein. Außerdem finden sich dabei immer wieder Überschriftenhierarchien und viele andere Varianten dieser Technik.
2. Ist eine Seite mit Überschriften, Listen und Absätzen gut strukturiert, so können Screenreadernutzer über die Strukturen navigieren. Eine Navigationsleiste, die mit einem ul-Element strukturiert ist, ist beispielsweise überspringbar – Screenreader bieten Tastenbefehle an, um zum Ende eines Elements zu springen. Alternativ zu den Listen gelingt die strukturelle Navigation auch über Grafiken, Formulare und viele andere Elemente. Obwohl es viele navigierbare Strukturmerkmale einer Webseite geben kann, ist es letztlich dem Nutzer überlassen, diese technischen Unterschiede zu begreifen und für jede Website neu zu lernen.
3. Schließlich werden Sprunglinks für die Navigation innerhalb von Webseiten in Betracht gezogen. Schwierig bei diesem Konzept ist, dass die Sprunglinks meist am Anfang einer Webseite stehen und beispielsweise nicht dafür geeignet sind, eine Webseite zu "scannen". Gleichzeitig ist es die einzige Technik, die nur mit dem Browser (und ohne Assistenztechnologien oder Plug-Ins) zugänglich ist.

Die Technik mit Überschriften war – früher – der übliche Weg, Navigationsbereiche überspringbar zu machen:

Mit dem HTML-Standard wurden sukzessive acht Elemente eingeführt, die eine landmark role besitzen. Mit diesen HTML-Elementen sollen Regionen einer Webseite ausgezeichnet werden. Die Elemente bieten insbesondere eine Semantik, sind aber in Assistenztechnologien per Tastatur ansteuerbar. Die Elemente mit "landmark roles" dienen der strukturellen Navigation.

HTML-Elemente für Seitenregionen

Inzwischen kann auf zusätzliche Überschriften zum Zweck der Navigation verzichtet werden. Inzwischen können Seitenregionen für die strukturelle Navigation eingesetzt werden. Beispielsweise erlaubt es der Einsatz eines nav-Elements Screenreadernutzenden, die Region anzuspringen oder zu überspringen:

Das nav-Element besitzt die Rolle "navigation". Rollen und ihre Bedeutung werden in Accessible Rich Internet Applications (ARIA) 1.2 spezifiziert. Die Rolle wird durch das nav-Element implizit vergeben: Browser übermitteln die Rolle an Assistenztechnologien.

Es gibt Fälle, in denen der Einsatz eines nav-Elements erforderlich, aber technisch schwierig umzusetzen ist. Das HTML kann dann mit einem role-Attribut "repariert" werden. Der folgende Code führt zum gleichen Ergebnis wie oben:

Die explizite Zuweisung von Rollen mit einem role-Attribut ist heute nicht mehr erforderlich. Folgende landmark roles (mit ihren HTML-Entsprechungen) gibt es:

Wenn ein HTML-Element eine Rolle bereits besitzt, dann ist es meist nicht sinnvoll, die Rolle zusätzlich mit dem role-Attribut zuzuweisen. Nach der Aria in HTML-Spezifikation wird davon abgeraten. Ein main-Element mit einer expliziten Rolle ist überflüssig:

Nur bei den header- und footer-Elementen ist eine explizite Zuweisung der Rolle sinnvoll. Die header- und footer-Elemente erhalten eine Rolle nur dann, wenn sie keine Seitenregionen als Elternelement haben. Wenn ein footer-Element am Ende eines article-Elements in einem Screenreader ansteuerbar sein soll, kann die Rolle "contentinfo" explizit zugewiesen werden.

Besonderheiten

Seitenregionen haben im Browser keine Funktionalität. Es handelt sich bei Seitenregionen um Abschnitte oder Gruppierungen. Die semantischen Informationen werden vom Browser in den Accessibility-Tree des Betriebssystems abgelegt. Assistenztechnologien wie Screenreader holen die Informationen dort ab und verarbeiten sie weiter. Die acht Seitenregionen werden in verschiedenen Screenreader-Browser-Kombinationen wie in nachstehender Tabelle identifiziert.

Hinweis: Die header- und footer-Elemente haben die Ergebnisse in einer Testdatei geliefert. Auf anderen Seiten könnten die Elemente Kindelemente von anderen Seitenregionen sein. Dann erhalten sie keine Rolle.

Die form- und section-Elemente

Wenn Formulare (form-Elemente) oder Abschnitte (section-Elemente) als Seitenregion bereitgestellt werden sollen, dann müssen Sie einen Namen erhalten (siehe Tabelle oben). Die meisten Formulare und Abschnitte sollten nicht als Seitenregion ausgezeichnet werden, aber es kann Ausnahmen geben. Einzelne wichtige Inhalte, die ansonsten in einem Screenreader schwer zu finden sind, könnten eine solche Ausnahme bilden.

Sowohl form- als auch section-Elemente müssen mit einem aria-label- oder aria-labelledby-Attribut einen Namen erhalten, bevor Browser eine Rolle dafür festlegen:

Diese Vorgehensweise kann damit begründet werden, dass nicht jeder Abschnitt und nicht jedes Formular als Region einer Seite ausgezeichnet werden soll oder muss. Ein Kontaktformular könnte der Hauptinhalt (main-Element) der Seite sein – eine zweite Seitenregion ist nicht förderlich für die Barrierefreiheit an der Stelle. Wenn aber das Kontaktformular zwischen anderen Inhalten oder in einem modalen Dialogfenster steht, kann die zusätzliche Auszeichnung sinnvoll sein.

Die header- und footer-Elemente

Die header- und footer-Elemente dienen dazu, einen einführenden oder abschließenden Inhalt eines Seitenabschnitts auszuzeichnen. Das heißt, diese beiden Elemente können für das body-Element, aber auch für andere Abschnittselemente (article-, aside-, nav- und section-Elemente) eingesetzt werden. Sie dürfen außerdem im Kontext eines main-Elements stehen.

Nach ARIA 1.2 dürfen Browser die Rollen "banner" und "contentinfo" nur dann als Region an den Accessibility-Tree übermitteln, wenn sie im Kontext des body-Elements stehen. Sofern die beiden Elemente im Kontext eines article-, aside-, main-, nav- oder section-Elements stehen, dürfen Browser keine besondere Rolle zuweisen; die Elemente erhalten die Rolle "generic".

Namen für Seitenregionen

Regionen sind semantische Auszeichnungen ohne Inhaltsbezug. Wenn ein Screenreader auf eine Region mit der Rolle "navigation" trifft, wird die Region mit "Navigationsregion" o.ä. identifiziert. Ähnlich werden die anderen Regionen identifiziert (auch wenn die Bezeichnungen von Screenreader zu Screenreader variieren).

Seitenregionen sollten eindeutig beschriftet werden, wenn mehr als eine Region des gleichen Typs auf einer Seite vorkommt. Außerdem sollten sie einen inhaltlichen Bezug herstellen (wie eine Überschrift); eine Region sollte beispielsweise nicht mit "Navigation", "Sekundäre Navigation" oder "Meta-Navigation" bezeichnet werden, da sie vom Screenreader dann als "Navigation Navigationsregion" identifiziert wird. Hingegen sind Bezeichnungen wie "Sie sind hier" (für eine Brotkrumennavigation) oder "Untermenü" in Ordnung. Manchmal wird es Fälle geben, wo die gleiche Bezeichnung zweckmäßig ist und zwar dann, wenn die Inhalte der Seitenregionen identisch sind (z.B. bei der Wiederholung einer Paginierung). Letztlich kommt es darauf an, dass wenn die Seitenregionen aufgelistet werden, sie voneinander unterscheidbar sind.