2.2.6 Bieten Sie Navigationsunterstützung für blinde NutzerInnen und Tastatur NutzerInnen

Hintergrund

Blinde NutzerInnen lesen eine Website linear Buchstabe für Buchstabe, Wort für Wort, Zeile für Zeile und müssen daher im Zweifelsfall durch eine Seite von Beginn bis zum Ende durchgehen. Um ein schnelles Querlesen zu ermöglichen, sind zusätzliche, optisch versteckte Navigationshilfen wie Skiplinks (Sprungmarken) und Überschriften vor einzelnen Seitenbereichen nützlich.

Skiplinks nützen nicht nur Blinden, bei Tastaturfokus sichtbar gemachte Skiplinks ermöglichen auch motorisch eingeschränkten NutzerInnen, die keine Maus bedienen können, das Überspringen der Navigation.

Derzeit erlaubt nur der Browser Opera das Springen von Überschrift zu Überschrift mit der Tastatur. Auch Screenreader Software kann Überschriften direkt ansteuern, die Überschriftenhierarchie anzeigen und Überschriften in einer Extraliste anzeigen. Im besten Fall lässt sich aus dieser Outline eine inhaltliche Struktur und Überblick erkennen.

Die vorhandenen Möglichkeiten von assistiven Technologien und Browsern, Strukturinformationen wie Überschriften, Absätze und Listen auszulesen und anzusteuern, verbessert die Bedienungsfreundlichkeit und sollte daher unbedingt genutzt werden.

Auch spezielles Tabellen- und Formular Markup ermöglicht Screenreader NutzerInnen die exakte Zuordnung von zusammengehöriger Informationen.

Maßnahmen

  • Setzen Sie optisch versteckte Sprungmarken (Skiplinks) an den Anfang der Seite. Setzen Sie diese gezielt und sparsam ein. Zuviele Skiplinks konterkarieren den erwünschten Beschleunigungseffekt für Screenreader und Tastatur NutzerInnen.
  • Benennen Sie Skiplinks mit dem Linkziel (z.B. Zum Inhalt springen), nicht mit der Aktion (z.B. Menü überspringen).
  • Blenden Sie die Skiplinks bei a:focus, a:active ein, damit TastaturbenutzerInnen sie beim Durchtabben mit der Tabulatortaste auch wahrnehmen und somit nutzen können.
  • Setzen Sie optisch versteckte Überschriften vor Navigationsteile. Verwenden sie dafür, wenn möglich, eine Überschrift in der korrekten Hierarchie, aber bevorzugt nicht H1 und H2, die für Überschriften im Inhaltsteil vorbehalten sein sollten. Eine pragmatische, wenn auch die Überschriftenhierarchie brechende Lösung ist, für versteckte Orientierungshilfen H6 zu verwenden, die meist nicht anderweitig verwendet wird.
  • Verstecken Sie Inhalte für Screenreader nicht mit display:none oder visibility:hidden, da moderne Screenreader (z.B. der gängigste Screenreader Jaws) diese Elemente nicht vorlesen. Verstecken Sie Inhalte stattdessen, indem Sie diese per CSS außerhalb des Viewports positionieren [Eine übliche Vorgangsweise zum Verstecken von Hinweisen, die nur Screenreader Usern zu Verfügung stehen sollen, ist die Definition einer CSS class mit folgenden Angaben: .hidden {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}, vgl. http://www.webaim.org/techniques/css/invisiblecontent/].
  • Übersetzen Sie auch versteckte Inhalte bei mehrsprachigen Seiten.
  • Verwenden Sie das ACCESSKEY-Attribut, wenn Sie es überhaupt einsetzen, sehr überlegt.
    Belegen Sie Accesskeys mit Zahlen von 0-9, nicht mit Buchstaben, die bereits durch Browser Menüs oder Funktionen des Betriebssystems vorbelegt sind. Erklären Sie die verwendeten Accesskeys.
  • Verwenden Sie das TABINDEX-Attribut, wenn Sie es überhaupt einsetzen, überlegt. Verwenden Sie es nur, wenn sich die Seite nicht gut durch Anordnung des HTML-Codes linearisiert werden kann.
  • Verwenden Sie Listen für Navigation und Aufzählungen im Content.
  • Verwenden Sie Absätze im Content, statt doppelter Zeilenumbrüche, d.h. das P Element, statt mehrfacher BR.
  • Verwenden Sie LABEL bei Formularen, bei komplexen Formularen auch FIELDSET und LEGEND.
  • Verwenden Sie Tableheaders <th> bei Datentabellen.
  • Verwenden Sie SCOPE oder HEADERS und ID bei komplexen Datentabellen um NutzerInnen von Screenreader-Software die Zuordnung von Datenzellen zu erleichtern.

Wer profitiert davon

  • Blinde NutzerInnen
  • NutzerInnen mit motorischen Einschränkungen
  • NutzerInnen von assistiven Technologien

Beispiele

Hausfreund Braillezeilen Webformatoransicht

hausfreund.at: Die Seite ist auch in der linearisierten Ansicht mit einem Textbrowser (beim Test wurde der Screenreader Virgo mit Webformator verwendet) klar strukturiert, bietet Skiplinks, Alternativtexte für Grafiken und mit Labels versehene Formulare.

Quelle Formularverwirrung durch fehlende Labels

quelle.at: Der Bestellablauf wird durch fehlende Labels bei Formularen sehr erschwert. So ist z.B. keine eindeutige Zuordnung zwischen den Checkboxen und den Zusatzoptionen (unter „Gleich mitbestellen“) möglich. Cross Selling Angebote in der rechten Spalte sind strukturell nicht deutlich genug markiert und abgesetzt. Einem blinden User ist deshalb nicht völlig klar, was sich im Warenkorb befindet und was nicht.