Navigation und Service

Einfach teilhaben (Link zur Startseite)


Vorhersehbare Navigation

Begründung

Webseiten, deren Anordnung und Bedienung für behinderte Nutzerinnen und Nutzer vorhersehbar sind, können auch für eine größere Zahl von Personen besser nutzbar sein. Insbesondere profitieren davon Personen, die eine Sprachausgabe nutzen und den Inhalt ohne den räumlichen Bezug in der Bildschirmansicht präsentiert bekommen. Die Sprachausgabe kann immer nur einen Inhalt zu einer Zeit präsentieren, daher ist eine vorhersehbare Reihenfolge der Inhalte wichtig für eine effiziente Nutzung des Angebots.

Sehbehinderte Nutzerinnen und Nutzer, die eine Lupensoftware einsetzen, sehen zu einem Zeitpunkt immer nur einen kleinen Ausschnitt der Webseite. Finden sie die Navigation oder den Inhaltsbereich nicht an dem von ihnen erwarteten Ort wieder, weil die Position zwischen den Seiten innerhalb eines Angebots wechselt, verlieren sie die Orientierung. Sie müssen dann die Seite Stück für Stück nach den gesuchten Inhalten absuchen. Durch die zunehmende Nutzung von mobilen Endgeräten erhält dieser Punkt zusätzliche Bedeutung, solange nicht für alle Seiten mobile Versionen, die für kleine Bildschirme optimiert sind, verfügbar sind.

Teil der Seite, der für Lupennutzerinnen und -nutzer auf dem Bildschirm sichtbar ist Teil der Seite, der für Lupennutzerinnen und -nutzer auf dem Bildschirm sichtbar ist

Menschen mit Lernschwierigkeiten können verwirrt werden, wenn der Aufbau der Seite sich innerhalb des Angebots stark voneinander unterscheidet. Bleibt der Großteil der Seite identisch aufgebaut, müssen sie sich nur noch auf die neuen, veränderten Inhalte konzentrieren und müssen nicht erneut alle Inhalte lesen. Auch für Menschen mit motorischen Einschränkungen bietet ein konsistenter Aufbau Vorteile, da diese Nutzer zum Beispiel ihre Navigationsstrategien optimieren können. Studien haben gezeigt, dass auch für ältere Menschen eine nachvollziehbare, konsistente Navigation wichtig ist, und sie bei der Nutzung der Seite unterstützt.

Ziel ist es eine Navigation aufzubauen, die für keine Nutzerin und keinen Nutzer unvorhersehbare Ereignisse auslöst, die die Nutzung der Seiten eines Angebots erschweren.

Weiterführende Informationen und Quellen:

Anleitung

Fokussierung vorhersehbar gestalten

Auf vielen Webseiten steht eine Schnellnavigation zur Verfügung, die direkt zu häufig nachgefragten Themen führt. Personen, die nicht mit der Maus arbeiten können, müssen bei der Bedienung per Tastatur über diese Elemente hinweg navigieren. In diesem Moment erhält das Element, ob es genutzt werden soll oder nicht, zunächst den Fokus. Möglicherweise werden auch Einstellungen vorgenommen, dann jedoch ein anderer Weg zum gesuchten Inhalt eingeschlagen. In diesem Fall darf eine Aktion nicht lediglich dadurch ausgelöst werden, dass das Feld den Fokus erhält. Im Beispiel der Schnellnavigation auf der Webseite der "TU Dortmund" ist dies durch die zusätzliche "Los"-Schaltfläche realisiert:

Auswahlfeld zur Schnellnavigation am Ende der Hauptnavigation mit Los-Schaltfläche im Angebot der TU Dortmund Auswahlfeld zur Schnellnavigation am Ende der Hauptnavigation mit Los-Schaltfläche im Angebot der TU Dortmund

Diese Aktionen dürfen erst bei einem Klick oder der Auswahl per Eingabetaste oder Leertaste erfolgen, also erst, wenn das Element wirklich aktiviert wird. Nur aufgrund des Fokus, den ein Element erhält, dürfen keine Fenster geöffnet, Formulare abgeschickt oder neue Seiten geladen werden. Zum Beispiel darf sich kein Druckdialog öffnen, wenn der entsprechende Navigationspunkt den Fokus erhält. Auch dürfen keine neuen Fenster direkt beim Laden der Seite geöffnet werden. Dies geschieht häufig bei Umfragen oder Werbehinweisen. In diesem Fall wäre den Nutzerinnen und Nutzern nicht klar, warum Inhalte in einem unerwarteten Kontext erscheinen. Zusätzliche Informationen im gleichen Kontext dürfen jedoch gegeben werden, wenn ein Element den Fokus erhält.

Um dies zu testen, könnte eine vollständige Seite mit der Tabulatortaste der Tastatur durchgegangen werden. Wenn alle Elemente der Seite angesteuert werden können, ohne dass eine Aktion ausgelöst wird, wäre die Anforderung erfüllt.

Eingaben vorhersehbar behandeln

Wird ein Element ausgewählt und durch Klick oder die Eingabetaste aktiviert, darf dies keine unerwarteten Aktionen auslösen. Zum Beispiel dürfen Formulardaten erst abgesendet werden, wenn die "Absenden"-Schaltfläche aktiviert wird. Auch sollten die Formulardaten nicht verworfen werden, wenn der Nutzer oder die Nutzerinnen "Anfrage verändern" oder "Bestellung korrigieren" auswählt. Die ausgelöste Aktion muss immer vorhersehbar sein.

Insbesondere Kontextwechsel durch Eingaben der Nutzerinnen und Nutzer sind zu vermeiden. Wird das Linkziel in einem neuen Fenster geöffnet, muss auf diese Kontextänderung vorher hingewiesen werden. Und zwar so, dass diese sowohl über die Sprachausgabe als auch sichtbar am Bildschirm verfügbar ist. Die sicherste Methode dieses Ziel zu erreichen, ist dies in den Linktext zu schreiben. Wie der Hinweis am Bildschirm angezeigt wird, ob ständig oder nur, wenn der Link den Fokus erhält, kann per CSS geregelt werden.

Auch das Aktive Setzen von Auswahlfeldern in Formularen durch den Nutzer und die Nutzerinnen, im Gegensatz zum "über das Auswahlfeld hinweg navigieren", wie im vorhergehenden Abschnitt beschrieben, darf nicht dazu führen, dass neue Fenster geöffnet werden. Genauso muss der Linktext bereits Informationen zum Format des Linkziels geben, wenn dies nicht im erwarteten HTML-Format vorliegt. PDF-Dateien und andere Formate, für die Plugins oder zusätzliche Software zum Betrachten benötigt werden, müssen entsprechend angekündigt werden.

Zum Testen dieser Bedingung müssten unterschiedliche Elemente ausgewählt und aktiviert werden, also z.B. mit der Maus angeklickt werden. Sind alle Aktionen, die dadurch ausgelöst werden, so wie erwartet, ist diese Bedingung der BITV erfüllt.

Navigation einheitlich gestalten

Die Navigationsmöglichkeiten eines Webangebots sind auf allen Seiten des Angebots vergleichbar. Daher sollten diese wiederkehrenden Inhalte auch einheitlich auf allen Seiten eines Angebots gestaltet sein. Möglicherweise unterscheidet sich der gerade detailliert verfügbare Unterbereich, in dem navigiert werden kann, aber der Aufbau und die Reihenfolge des auf allen Seiten wiederkehrenden Teils der Navigation insgesamt wird gleich bleiben. Diese Inhalte sind daher sowohl optisch auf der Seite als auch innerhalb der Struktur, die die Reihenfolge für die Sprachausgabe vorgibt, an einheitlicher Position und gleichbleibender Reihenfolge zu gestalten.

Ausgenommen hiervon sind Einstellungen, die die Nutzerin oder Nutzer selbst vornehmen können, um die Inhalte individuell optimal angezeigt zu bekommen. In diesem Fall müssen die Auswahlmöglichkeiten jedoch zu erwarteten Aktionen führen, für die Nutzerinnen und Nutzer nachvollziehbar sein und wie erwartet ausfallen.

Bezeichnungen einheitlich wählen

Gibt es im Webangebot an unterschiedlichen Stellen Elemente, die die gleiche Funktion erfüllen oder Aktion auslösen, müssen diese die gleiche Bezeichnung besitzen. Dies hilft zum Beispiel bei der Nutzung des Angebots über eine Sprachausgabe, bei der zusätzliche Merkmale, wie Form, Farbe oder Lage innerhalb der Seite, nicht zusätzlich genutzt werden können, um zu erkennen, dass ein Element die gleiche Funktion hat. Dies betrifft unter anderem die Bezeichnung von Linkzielen, Beschriftungen von Formularelementen, wie Schaltflächen, und Alternativtexte von Grafiken oder Symbolen. So sollte zum Beispiel eine auf allen Seiten verfügbare Suche nicht einmal mit einer Schaltfläche mit der Beschriftung "Suchen" und einmal mit der Beschriftung "Finden" ausgelöst werden.

Einheitliche Bezeichnung muss aber nicht immer bedeuten, dass die Bezeichnungen identisch lauten. Gibt es im Angebot bei mehrseitigen Artikeln beispielsweise eine Funktion zum "vor"- und "zurück"-Blättern, kann diese auf jeder Seite entsprechend individuell lauten. Auf Seite 1, wird die Vorwärtsblättern-Funktion "Seite 2" und auf Seite 2 entsprechend "Seite 3" lauten. Also nicht identisch, aber einheitlich. Genauso kann es vorkommen, dass das gleiche Symbol auf unterschiedlichen Seiten eine andere Beschriftung besitzt. So kann ein Symbol, das für positive Hervorhebung steht, jeweils abhängig vom Kontext, eine etwas andere Bezeichnung erhalten. In einer Seminarliste zum Beispiel: "buchbar" oder in einer Publikationsliste eher "lieferbar".

Ob zwei Elemente, die das gleiche Ziel haben oder die gleiche Aktion auslösen, unterschiedlich bezeichnet sind, ist gut mit Hilfe von automatischen Testwerkzeugen, zum Beispiel "eGovMon" feststellbar. Genauso der umgekehrte Fall, wenn zum Beispiel mit dem gleichen Linktext auf unterschiedliche Ziele verwiesen wird.

Kontextänderungen vermeiden oder zumindest ankündigen

Wenn eine Nutzerin oder ein Nutzer eine Aktion im Webangebot auslöst, wird eine Änderung des Kontextes, entsprechend der ausgelösten Aktion, erwartet, wie bereits beschrieben. Einige Kontextwechsel finden jedoch unerwartet und für die Nutzerinnen und Nutzer damit überraschend statt. Solche Kontextänderungen müssen zur Erfüllung der BITV Priorität I zumindest angekündigt werden, damit sie die Nutzerinnen und Nutzer der Seiten nicht überraschen. Möglicherweise werden Links oder Aktionen nicht ausgelöst, wenn der Nutzerin oder dem Nutzer vorher klar ist, dass dies zu Problemen mit den eingesetzten Hilfsmitteln führen kann oder zum Beispiel von der aktuellen Webseite wegführt.

Ein Webangebot, das Priorität II der BITV erfüllt, ist besser zugänglich als ein Angebot, das Priorität I erfüllt. Ein Angebot, das Priorität II erfüllt, ist also von mehr Personen nutzbar. Wird BITV Priorität II angestrebt, reicht es nicht aus, Kontextänderungen anzukündigen. In diesem Fall sollten sie generell vermieden werden.

Jede Kontextänderung muss in diesem Fall durch die Nutzerin oder den Nutzer ausgelöst werden oder es muss eine Möglichkeit geben, diese zu deaktivieren. Dies betrifft u.a. Updates der Seite, die automatisch geladen werden. In diesem Fall muss ein Mechanismus vorhanden sein, um den Inhalt zu einem ausgewählten Zeitpunkt durch eine eigene Handlung zu aktualisieren. Dies kann zum Beispiel durch eine "Aktualisieren"-Schaltfläche geschehen.

Existiert eine Weiterleitung zu einer anderen Seite, muss diese entweder serverseitig erfolgen oder zum Beispiel durch das meta-Element mit dem Wert "refresh" im Kopf der Seite clientseitig geregelt werden. Wichtig ist, dass der Nutzer oder die Nutzerin nicht durch die Weiterleitung irritiert wird, weil die ursprüngliche angeforderte Seite kurz angezeigt bzw. geladen wird.

Das Öffnen neuer Fenster sollte generell, wenn Priorität II angestrebt wird, vermieden werden. Lässt es sich nicht vermeiden, muss wie bereits im Zusammenhang mit BITV-Bedingung "3.2.2 Bei Eingabe" beschrieben, vorab darauf hingewiesen werden.

Weiterführende Informationen:

Beispiele

Einheitliche Navigation

Eine einheitliche Navigation muss nicht auf allen Seiten identisch aussehen, aber die einzelnen wiederkehrenden Elementen müssen an der gleichen Stelle bzw. in der gleichen Reihenfolge angeordnet sein. Im Angebot des Bundesministeriums für Bildung und Forschung wird je nachdem welcher Punkt in der Hauptnavigation gewählt ist, eine vollständig andere Bereichsnavigation angezeigt. Diese ist jedoch immer an der gleichen Position, sowohl visuell als auch per Sprachausgabe, zu finden. Genauso wie die Hauptnavigation auf allen Seiten, unabhängig davon, welcher Punkt ausgewählt ist, die gleichen Einträge enthält, und diese identisch angeordnet sind. Zusätzlich ist jeder Bereich durch eine andere Farbe gekennzeichnet, um die Orientierung zu erleichtern:

2 Seiten aus dem Webangebot des BMBF - Bildung und Forschung 2 Seiten aus dem Webangebot des BMBF - Bildung und Forschung

Warnung vor neuen Fenstern

Kann das Öffnen neuer Fenster nicht vermieden werden, weil zum Beispiel ein Hilfetext parallel zur Eingabe in ein Formular in einem eigenen Fenster angezeigt werden soll, muss dieses deutlich angekündigt werden. Die sicherste Methode dies geräteunabhängig anzukündigen, ist dies im Linktext zu ergänzen:

 <a class="hilfe" href="hilfe.html" target="_blank">
   Zur Hilfe <span>öffnet in einem neuen Fenster</span>
 </a>

Per CSS kann der Zusatz "öffnet in einem neuen Fenster" solange der Link nicht den Fokus hat, nach links aus dem sichtbaren Bildbereich geschoben werden mit:

a.hilfe span
 {
  position:absolute
  left: -9000px;
  ...
 }

Erst wenn das Element den Fokus erhält, wird dieser Text wieder sichtbar. Der gesamte Quellcode ist über das Technikdokument "G201: Giving users advanced warning when opening a new window" verfügbar. Wie in der Abbildung zu sehen ist, wird die Warnung erst sichtbar, wenn der Link per Maus oder Tastatur den Fokus erhält:

3 Ansichten des gleichen Links: ohne Fokus gibt es keinen Hinweis, mit angezeigtem Hinweis zu neuem Fenster durch Fokus bei Mausnutzung und durch Tastaturnutzung 3 Ansichten des gleichen Links: ohne Fokus gibt es keinen Hinweis, mit angezeigtem Hinweis zu neuem Fenster durch Fokus bei Mausnutzung und durch Tastaturnutzung

BITV 1.0 zu BITV 2.0

Bereits in der BITV 1.0 gab es verschiedene Bedingungen, die eine vorhersehbare Navigation zum Ziel hatten. Diese waren verteilt über:

  • Anforderung 7 zu zeitgesteuerten Änderungen, zu denen Aktualisierungen und Weiterleitung zählen,
  • Anforderung 9 zur Nutzung von Funktionen unabhängig vom Ein- oder Ausgabegerät und
  • Anforderung 13 zur übersichtlichen und schlüssigen Gestaltung der Navigationsmechanismen.

In der BITV 2.0 sind diese unter dem Prinzip der "Verständlichkeit" in einer Anforderung zusammengefasst worden, in Anforderung 3.2 "Vorhersehbar". Die neuen Bedingungen sind allgemeiner, und damit technologie-unabhängig formuliert. Durch die zugeordneten Technikdokumente werden sie jedoch eindeutiger als es bisher in der BITV 1.0 der Fall war.

© Bundesministerium für Arbeit und Soziales