Navigation und Service

Einfach teilhaben (Link zur Startseite)


Navigation und Orientierung innerhalb einer Internetseite

Begründung

Wie bereits im vorhergehenden Abschnitt erläutert, kommt eine gute Navigation und Orientierung allen Besucherinnen und Besuchern eines Webangebots zugute. Hat der Nutzer oder die Nutzerin innerhalb des Angebots den Weg zu den gesuchten Informationen gefunden, ist auch die Navigation innerhalb einer einzelnen Seite von Bedeutung, um die gesuchten Inhalte innerhalb der Seite gut aufzufinden. Die meisten Webauftritte bestehen aus zahlreichen Einzelseiten und basieren daher auf Vorlagen. Dadurch sind die Anforderungen an die Navigation und Orientierung innerhalb einer Internetseite gut zu erfüllen.

Viele Bedingungen an die Navigation und Orientierung innerhalb einer Seite ergeben sich aus der Nutzung anderer Ein- und Ausgabegeräte. Insbesondere die Bedienung mithilfe der Tastatur muss auf den Seiten gut unterstützt werden.

Die Navigation innerhalb der aktuellen Seite muss allen Nutzerinnen und Nutzern unabhängig vom genutzten Ein- oder Ausgabegerät möglich sein. Auch für Personen, die die Seite das erste Mal nutzen, müssen sich die Navigationsmöglichkeiten leicht erschließen.

Anleitung

Innerhalb einer einzelnen Seite stellt sich für die Nutzerinnen und Nutzer ebenfalls die Frage, wo sie sich gerade auf der Seite befinden und wohin sie gehen können. Einige Aspekte sind bereits im Zusammenhang mit der Navigation im Angebot diskutiert worden und werden hier daher nur kurz erwähnt.

Wo bin ich?

Jede Seite sollte einen aussagekräftigen Seitentitel besitzen. Insbesondere, wenn sich nur wenig an den Inhalten einer Seite ändert, soll der Titel zur Unterscheidung der Seiten dienen. Wird zum Beispiel eine Anfrage über ein Formular auf einer Seite mit dem Titel "Name des Ministeriums - Kontaktformular" abgeschickt, sollten Eingabefehler bereits im Titel der folgenden Seite erkennbar sein: zum Beispiel "Name des Ministeriums - Fehlende Eingabe im Kontaktformular" (vgl. BITV-Bedingung 2.4.2 Seitentitel).

Nicht alle Nutzerinnen und Nutzer werden die Internetseite mit der Maus bedienen können. Während man bei der Mausnutzung immer ungefähr mitverfolgt, an welcher Stelle sich der Mauszeiger befindet, ist dies bei der Bedienung über die Tastatur schwieriger. Mithilfe der Tabulatortaste (oder beliebige andere Taster, die entsprechend an den Computer angeschlossen werden können), kann durch identische Tastendrucke von einem Link zum nächsten navigiert werden. Damit der Nutzer oder die Nutzerin nachvollziehen kann, an welcher Stelle auf der Seite sich gerade der Fokus befindet, muss dieser deutlich sichtbar sein. Navigationselemente werden häufig so gestaltet, dass sie sich verändern, wenn sich der Mauszeiger über diesen befindet. Das Gleiche sollte auch passieren, wenn die Elemente den Fokus über die Tastatur erhalten, also der Nutzer sich aktuell bei diesem Element befindet (vgl. BITV-Bedingung 2.4.7 "Sichtbarer Tastaturfokus" in Abschnitt 2.4.1 Tastaturbedienbarkeit). Auch die Reihenfolge der einzelnen Navigationselemente muss in einer sinnvollen Reihenfolge durchlaufen werden (vgl. BITV-Bedingung 2.4.3 "Fokus-Reihenfolge" in Abschnitt 2.4.1 Tastaturbedienbarkeit).

Um alle Navigationsmöglichkeiten der Seite schnell erkennbar zu gestalten, sollten Links möglichst unterstrichen werden. Ausreichend nach BITV ist es, wenn die Links erkennbar sind, sobald sie den Fokus erhalten, unabhängig davon, ob mit der Maus oder der Tastatur. Aus Sicht der Nutzbarkeit, wären jedoch ständig unterstrichene Links im Fließtext vorzuziehen, da diese den Nutzerinnen und Nutzern eindeutig signalisieren, wohin innerhalb und von der Seite aus navigiert werden kann.

Weiterführende Informationen:

Wohin kann ich gehen?

Direkt zu Beginn jeder Seite, sollte die Möglichkeit bestehen, die auf jeder Seite identischen Navigationselemente zu umgehen. Hierzu bieten sich sogenannte Sprunglinks an, die nur für Tastatur- und Screenreader-Nutzerinnen und -Nutzer "sichtbar" sind. Diese Links werden per "Cascading Stylesheets (CSS)" aus dem "Viewport", also dem sichtbaren Bereich der Internetseite herausgeschoben.

Sobald die Sprunglinks per Tastatur den Fokus erhalten, werden sie sichtbar. Damit sie sofort wahrgenommen werden und das Layout nicht stören, werden sie meist am oberen Rand der Seite eingeblendet. Per Sprachausgabe werden sie zusätzlich vorgelesen. Durch das Überspringen der Navigation oder von Teilen der Navigation gelangen motorisch eingeschränkte Menschen mit weniger Tastenklicks zum Inhalt. Blinden Nutzerinnen und Nutzern wird nicht auf jeder Seite die gleiche, bereits bekannte Navigation vorgelesen. Die Linktexte der Sprunglinks sollten aussagekräftig bezeichnet werden und das Linkziel beschreiben, nicht den übersprungenen Inhalt. Auch sollten die Sprunglinks sparsam eingesetzt werden, da ansonsten bei zu vielen Optionen auch diese Navigation störend wirkt. In der folgenden Abbildung ist eine Sprungnavigation, also die Navigation, die die Sprunglinks enthält, mit drei Links dargestellt. Diese Navigation ist hier technisch als Liste realisiert und wird durch entsprechendes CSS erst sichtbar, wenn die Links bei Tastaturbedienung den Fokus bekommen:

Screenshot der Seite di-ji.de mit Fokus auf dem Link 'zum Inhalt' und Darstellung der dahinter liegenden Listenstruktur ohne CSS Screenshot der Seite di-ji.de mit Fokus auf dem Link 'zum Inhalt' und Darstellung der dahinter liegenden Listenstruktur ohne CSS

Unterstützt wird das Umgehen von Elementgruppen, wie der Navigation, auch durch eine gut strukturierte Seite. Viele Hilfsmittel und Benutzeragenten, insbesondere Sprachausgabesoftware für blinde Menschen, unterstützt die Navigation von einem Element zum nächsten. Zum Beispiel von Überschrift zu Überschrift. Daher sollte die Seite gut mit Hilfe von Absätzen, Überschriften unterschiedlicher Ebenen, Listen (zum Beispiel für die Navigation) und weiteren HTML-Strukturelementen aufgebaut sein. Diese müssen nicht immer in der typischen Form des Strukturelements angezeigt werden. Zum Beispiel sind horizontale Navigationsleisten häufig als Liste strukturiert, auch wenn dies visuell nicht erkennbar ist. Das Layout der einzelnen Elemente kann per CSS gestaltet werden (siehe auch "Semantische Strukturen" in Abschnitt "2.3.1 Anpassbares Layout").

Die vorhandenen Navigationsleisten sollten optisch gut erkennbar gestaltet sein. Die einzelnen Bereiche können farblich unterschiedlich gestaltet sein, wie in dem folgenden Screenshot der Seite "Agentur barrierefrei NRW" zu sehen ist:

Screenshot der horizontalen und vertikalen Navigationsleisten der Seite agentur-barrierefrei-nrw.de Screenshot der horizontalen und vertikalen Navigationsleisten der Seite agentur-barrierefrei-nrw.de

Die horizontale Hauptnavigation und die vertikale Bereichsnavigation ist jeweils mit einer Überschrift, die nur per Sprachausgabe vorgelesen wird und von blinden und sehbehinderten Menschen zur internen Navigation genutzt werden kann gekennzeichnet. Die einzelnen Navigationspunkte sind als Listenpunkte einer geschachtelten Liste realisiert, die die optische Struktur widerspiegelt.

Darstellung der hinter der Seite agentur-barrierefrei-nrw.de liegenden Überschriften- und Listenstruktur der Navigation ohne CSS Darstellung der hinter der Seite agentur-barrierefrei-nrw.de liegenden Überschriften- und Listenstruktur der Navigation ohne CSS

Durch die gewählten Überschriften sollten die einzelnen Bereiche der Seite gut beschrieben werden (vgl. BITV Bedingung 2.4.6 "Beschreibungen"). Wie im Beispiel werden zu diesem Zweck häufig "unsichtbare" Überschriften eingesetzt, die Menschen helfen, die eine Sprachausgabe nutzen und den grafischen Seitenaufbau nicht zur Orientierung nutzen können. Hierzu kann die gleiche Technik wie bei den Sprunglinks eingesetzt werden. Während für einen Sehenden deutlich ist, dass in einer neuen Spalte ein neues Thema beginnt, ist diese Information per Sprachausgabe nicht verfügbar. Um die einzelnen Bereiche direkt ansteuerbar zu machen, sind aussagekräftige Überschriften notwendig. Diese sollten die wesentlichen Informationen direkt zu Beginn vermitteln.

Zum Beispiel, statt:

<h1>Kontakt</h1>
  <h2>Kontakt zum Dienstsitz in Bonn</h2>
  ...
  <h2>Kontakt zum Dienstsitz in Berlin</h2>
  ...

Besser:

<h1>Kontakt</h1>
  <h2>Bonn - Kontaktdaten zum Dienstsitz</h2>
  ...
  <h2>Berlin - Kontaktdaten zum Dienstsitz</h2>
  ...

Genauso eindeutig müssen alle Komponenten bezeichnet werden, die interaktiv eingesetzt werden. In HTML sind dies in der Regel Formularelemente, die in Abschnitt "2.7.1 Formulare" behandelt werden, es können aber auch andere Nicht-Text-Inhalte sein, die eine Beschriftung erfordern. In Priorität II wird zusätzlich gefordert, dass Inhalte, die ein eigenes Thema behandeln, deutlich durch eine Überschrift in Abschnitte unterteilt werden. So sind eine bessere Navigation durch lange Inhalte und ein besseres Verständnis der Inhalte gegeben (vgl. BITV-Bedingung 2.4.10). Da dies aber zum Beispiel bei Dokumenten nicht immer möglich ist, die im Original (Printversion oder Quelldokument) keine Überschriften enthalten, ist dies erst in Priorität II gefordert.

Die beiden beschriebenen Möglichkeiten Strukturierung der Inhalte und Sprunglinks, sind mögliche Techniken zur Erfüllung von Bedingung "2.4.1 Umgehen von Elementgruppen". Andere Möglichkeiten wären ebenfalls denkbar, solange das Ziel erreicht wird, die Elemente für unterschiedliche Nutzergruppen leicht umgehbar zu gestalten.

Informationsangebote sind häufig mehrspaltig gestaltet. Neben einem Artikel ist parallel eine Navigationsspalte oder eine Zusatzspalte mit ergänzenden Informationen angeordnet. Finden sich im Inhalt der Seite Querverweise auf diese Bereiche, sollten diese möglichst unabhängig von der optischen Gestaltung der Seite beschrieben werden oder direkt mit Sprunglinks an die entsprechenden Stellen versehen sein. Hinweise der Form "weiterführende Links finden Sie in der rechten Spalte" sind zu vermeiden, da diese räumlichen Beziehungen bei der Sprachausgabe oder einer starken Vergrößerung zum Beispiel bei anderen Auflösungen verloren gehen können (siehe auch "Anweisungen und Hinweise" in Abschnitt "2.3.1 Anpassbares Layout").

Weiterführende Informationen:

Beispiele

Nachvollziehbarer Fokus

Es gibt viele Möglichkeiten die aktuelle Position innerhalb der Seite sowohl für die Nutzung durch die Maus, als auch bei Tastaturnutzung deutlich hervorzuheben. Im folgenden Beispiel ist die Hervorhebung für beide Eingabegeräte identisch so geregelt worden. Die Farbe des Navigationspunktes, der aktuell den Fokus besitzt, ändert sich (dunkler) und unabhängig von der Farbe, falls diese aus irgendeinem Grund nicht wahrnehmbar sein sollte, erhält der Link im Menü einen Rahmen am linken Rand. Durch eine zusätzlich sinnvoll gewählte Reihenfolge der einzelnen Elemente ist immer erkennbar, wo sich der Fokus gerade befindet. Im folgenden Beispiel der Seite des Bundesprogramms "XENOS" steht der Fokus aktuell auf dem Navigationspunkt "Ausstieg zum Einstieg", drückt die Nutzerin oder der Nutzer erneut die Tabulator-Taste oder ein anderes angeschlossenes Eingabegerät, würde der nächste Punkt "XENOS Projektrecherche" den Fokus erhalten und auf die gleiche Art hervorgehoben:

Screenshot der Seite esf.de mit deutlichem Tastaturfokus in der Navigation über Farbe und Form Screenshot der Seite esf.de mit deutlichem Tastaturfokus in der Navigation über Farbe und Form

Umgehen von Elementgruppen

Ist eine Seite gut strukturiert, kann über die Struktur durch die Seite navigiert werden. Zum Beispiel sollten lange Artikel in einzelne Bereiche aufgeteilt werden, um ein schnelles Navigieren zu den Kapiteln zu ermöglichen. Der Artikel selbst muss durch Zwischenüberschriften in inhaltlich zusammenhängende Abschnitte gegliedert sein. Im folgenden Beispiel der Seite "imh plus" ist dies gut zu sehen:

Screenshot eines Artikels zum Thema „Gleichstellungsausweis“ auf der Seite imhplus.de mit Überblick über alle zum Artikel gehörenden Seiten Screenshot eines Artikels zum Thema „Gleichstellungsausweis“ auf der Seite imhplus.de mit Überblick über alle zum Artikel gehörenden Seiten

Das zugrunde liegende HTML-Gerüst enthält eine klare Struktur und eine artikelinterne Navigation über eine Liste, die jeweils zu Beginn des Inhaltsbereichs verfügbar ist. Dies ist bei der Ansicht der Seite ohne CSS und der Hervorhebung der Überschriften sichtbar:

Struktur des Artikels in der Ansicht ohne CSS mit hervorgehobenen aufeinander folgenden Überschriftenebenen Struktur des Artikels in der Ansicht ohne CSS mit hervorgehobenen aufeinander folgenden Überschriftenebenen

BITV 1.0 zu BITV 2.0

Die BITV 1.0 hat bereits einige Anforderungen und Bedingungen zur Gestaltung der Navigation einer Seite vorgegeben. Die Forderungen sind in der BITV 2.0 aufgewertet worden. Zum Beispiel ist das "Umgehen von Elementgruppen" in die BITV 2.0 Bedingung 2.4.1 in die Priorität I aufgenommen und verallgemeinert worden. Bisher war das Gruppieren und Umgehen nur in BITV 1.0 Bedingung 13.6 für den Spezialfall "Inhaltlich verwandte oder zusammenhängende Hyperlinks" festgelegt und musste erst in Priorität II erfüllt werden. Da viele Seiten bereits heute Sprunglinks anbieten, und diese Bedingung durch einfache Änderungen an zentraler Stelle in den Vorlagen durchgeführt werden, die meist von vielen Seiten des Angebots gleichzeitig genutzt werden, ist hierdurch nicht mit einem großen Mehraufwand zu rechnen.

Auch die Hilfen für Menschen, die die Seiten mit der Tastatur oder einem Tastaturersatz bedienen, haben sich verbessert. In der BITV 2.0 ist eindeutig gefordert, dass für diese Personen immer erkennbar sein muss, wo sie sich gerade innerhalb der Seite befinden. Dies geschieht durch einen deutlich gestalteten Tastaturfokus und eine sinnvolle Reihenfolge der Elemente bei der Tastaturbedienung. In der BITV 1.0 war lediglich ein zur Mausbedienung äquivalenter Fokus gefordert. Gab es bei der Mausnutzung keine Hervorhebung der Links, die den aktuellen Fokus besitzen, musste diese auch bei Tastaturnutzung nicht der Fall sein. Dass Mausnutzer durch die Auge-Hand-Koordination jederzeit wussten, wo auf der Seite sich der Mauszeiger aktuell befindet, blieb dabei unberücksichtigt.

Einige Punkte, die in der BITV 1.0 nicht explizit in Bedingungen formuliert waren, sind in der BITV 2.0 jetzt als eigene Bedingungen in der Priorität I aufgenommen worden. Dazu zählen zum Beispiel "2.4.8 Standort" und "2.4.2 Webseitentitel". Da diese Punkte jedoch in den verbreiteten Testverfahren bereits als Interpretationen der BITV 1.0 Anforderungen enthalten waren, und der Suchmaschinenoptimierung, sowie der Verbesserung der Usability (Gebrauchstauglichkeit) dienen, sind diese Punkte auf den Seiten des Bundes bzw. BITV 1.0 konformen Seiten in der Regel bereits umgesetzt.

BITV

Priorität I

BITV Bedingung 1.3.1 "Informationen und Beziehungen"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.1 "Umgehen von Elementgruppen"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.2 "Webseiten-Titel"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.3 "Fokus-Reihenfolge"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.4 "Zweck eines Links (im Kontext)"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.6 "Beschreibungen"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.7 "Sichtbarer Fokus"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.8 "Standort"

Für Experten (in Englisch):


Deutsche Übersetzungen:


Priorität II

BITV Bedingung 2.4.9 "Zweck eines Links"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 2.4.10 "Abschnittsüberschriften"

Für Experten (in Englisch):


Deutsche Übersetzungen:

© Bundesministerium für Arbeit und Soziales