Last modified: Februar 9, 2011

Noch läuft sie ja, die Tab Parade, die unsere Erfahrungen in Sachen Tastaturnavigation vertiefen und in Beiträgen festhalten soll. Ich habe mal dafür einen Praxistest gemacht: Seniorkom.at.

Ich nehme dabei den Fehdehandschuh von Peter Kammerer auf, der sich für seinen Tab-Versuch das BIENE-Projekt aus dem Jahre 2004 – die Postbank – vorgenommen hat und fordert, dass nur noch mehr Nachhaltigkeit ausgezeichnet werden soll, weil das Ergebnis im Hinblick auf die Tastaturnutzung eher mager ausgefallen ist.

Die Webseite seniorkom.at ist gerade mit dem e-Inclusion Award ausgezeichnet worden und steht für ein barrierefreies, seniorengerechtes Web 2.0. Der e-Inclusion Award will Projekte prämieren, die möglichst viele Menschen mit einschließt. Dazu würden dann ja auch Tastaturnutzer zählen. Ich habe das Projekt ausgewählt (Stand: 17.11.2008), weil es zum einen Vorzeigefunktion hat – und dazu hat es durchaus Grund – und zum anderen, weil es auch ein Paradebeispiel dafür ist, was in der Optimierung für die Tastaturnutzung doch immer wieder schief gehen kann.

Der Tastaturfokus: Wo bin ich nur?

Abbildung 1: Fehlender oder unzureichender Tastaturfokus seniorkom.at

Wahrscheinlich würde es dem herkömmlichen Nutzer bei seiner testähnlichen Tab Parade-Runde gar nicht auffallen: Man kommt doch ganz gut durch mit der Tastatur. Ja, aber – wo bin ich nur? Leider wird auf den Tastatur-Fokus kaum wert gelegt. Dazu sollte man immer in CSS Hand anlegen für :focus und :active. In Formularen wird :focus und weniger :active zwar verwendet, aber fast nur bei Buttons. Eine Differenzierung wird zwischen :hover, :focus und :active kaum vorgenommen, der Rahmen der Elemente hat oftmals die gleiche Farbe. Das ist dann leider suboptimal. Auch wäre es optisch besser, wenn für :focus und :active eine auffälligere Farbcodierung gewählt würde, etwa eine Invertierung.

Abbildung 2: Aktueller Navigationsfokus mit und ohne Farben seniorkom.at

Überhaupt werden zu viele Zustände – auch :hover oder der aktive Navigationspunkt – nur über die Farbe geregelt. In der linken Navigation ist der aktive Punkt in keiner Weise gekennzeichnet, in der Navigation oben nur über Farbcodierung. Entfernt man die Farben des Dokuments, ist nicht mehr zu erkennen, wo man sich gerade befindet. Nur die browserinterne Kennzeichnung der Links greift noch, welche Seiten man schon besucht hat und welche nicht.

Tabben ohne Ende: Wo sind die Sprungmarken?

Abbildung 3: Sprungmarken werden nur sichtbar und nutzbar ohne CSS seniorkom.at

Auch dies ist wieder eine Webseite mit vielen Navigationen, die alle noch vor dem eigentlichen Inhalt durchgetabbt werden müssen. Da wünscht man sich eine Möglichkeit, direkt zum Inhalt zu gelangen. In der herkömmlichen Darstellung hat man dazu aber keine und erst durch einen Blick in den Quellcode wird man fündig: Es sind zwar Sprungmarken vorhanden, aber diese werden mit Hilfe von CSS versteckt: display:none.

Nun macht man damit leider gleich zwei Problemfelder auf: Zum einen sind bei aktiviertem CSS die Sprungmarken unbenutzbar und zum anderen kann der Screenreader (getestet mit JAWS) die auch nicht nutzen, weil die meisten display:none als genau das interpretieren – den Inhalt ignorieren. Für wen sollen dann also die Sprungmarken gut sein?

Ohnehin sind das zu viele Sprungmarken. Hier sollte man sich mehr beschränken. Der Hinweis auf einen Direktlink ist nicht wirklich alltagssprachlich verständlich.

Tabindex und Accesskeys auf verlorenem Posten

Abbildung 4: Versteckte Sprungmarken deaktivieren Accesskeys seniorkom.at

Ein weiterer negativer Effekt der versteckten Sprungmarken ist, dass die darin enthaltenden Accesskeys nicht mehr greifen. Erst wenn man CSS deaktiviert, kann man diese auch nützen. Die Belegung der Accesskeys ist eher willkürlich und orientiert sich nicht an Standards wie etwa an der AccessKey-Pad Empfehlung von Hellbusch.

Der Tabindex hat in der Tastaturnavigation immer die höchste Priorität und wird als erster angesteuert. Das Problem hier ist, dass der Tabindex, warum auch immer, nur für Formulare gesetzt wurde. Dadurch gelangt der Tastaturnutzer zuerst auf alle Formulare und erst danach beginnt man wieder am Kopf der Seite. Dadurch entsteht ein Bruch in der Linearität und gerade im Kopf der Webseite entsteht ein wirrer Ablauf. Entweder muss der Tabindex durch die gesamte Seite gezogen werden oder man verzichtet auf ihn ganz. Aber die Vermutung liegt hier nahe, dass auf die Formulare ein besonderer Fokus gelegt wurde.

Tastaturreihenfolge: etwas zu wirr

Abbildung 5: Die Tastaturreihenfolge im Kopfbereich seniorkom.at

Aufgrund des Tabindexes, der nur in den Formularen gesetzt ist, entsteht eine wirre Abfolge in der Tastaturnavigation. Auf dem Bild (Abbildung 5) kann man das genau verfolgen: Zuerst wird Tabindex 1-2 (Suchbereich), dann Tabindex 3-5 (Loginbereich) und schließlich Tabindex 6-7 (Bundesländerauswahl) angesteuert. Danach erst geht der Fokus wieder an den Kopf der Seite zum normalen, linearen Ablauf zurück.

Die Abfolge zeigt auch, dass die Tastaturabfolge inhaltlich springt, durch die Bevorzugung des Tabindex in den Formularen werden andere Nicht-Formularinhalte aus dem Zusammenhang gerissen. Das betrifft den Bereich Registrieren (Nummer 31) und den restlichen Bereich der Bundesländerauswahl (Nummer 17-28).

Da die Sprungmarken leider nicht funktionieren, hat man keine Möglichkeit diese vielen Punkte zu überspringen. Gerade die üppige Bundesländerauswahl sollte überspringbar sein. Hier würde sich auch eine strukturelle Navigation anbieten.

Minimale strukturelle Navigation und was man sich sonst noch wünschen könnte

Abbildung 6: Unterschiedliche Farbkontraste sind anwählbar, aber kein besserer Tastaturfokus seniorkom.at

Eine Minimalform der strukturellen Navigation – es werden Überschriften für wichtige inhaltliche Bereiche gesetzt – ist vorhanden für die Bereiche Textgröße und die Farbkontrasteinstellungen. Ein Nutzer, der sich Überschriften anzeigen lassen kann (ein Beispiel: Screenreader-Nutzer), kann direkt auf diese Bereiche mit Hilfe der Überschrift zusteuern. Leider fehlen diese strukturellen Überschriften für umfangreiche Bereiche wie Navigationen und Bundesländerauswahl. Auch wäre eine Sprungmarke für den Terminbereich von Vorteil, weil der Tastaturnutzer durch alle Einträge des Kalenders tabben muss.

Es werden zwar verschiedene Kontrastumgebungen angeboten, aber in keiner wird auf den Fokus in der Tastaturnavigation Wert gelegt. Das ist wirklich schade, weil gerade in diesen Kontrastmodi wäre es sehr einfach, schlicht mit Invertierungen im Fokus zu arbeiten. Neue Fenster bei Verlinkungen werden nur bedingt angezeigt. So öffnet der Link zur Anmeldung ein neues Fenster, das wird im Link aber nicht vermerkt. Ohne Javascript ist dieser Link ohnehin nicht bedienbar.

Fazit

Mit dieser Feinanalyse versuche ich zu zeigen, dass der Tastaturnutzer gerne vernachlässigt wird und die Optimierung unterschiedlichste Feinarbeit erfordert. Einige Aspekte wie die konsequente Linearisierung der Inhalte greift sehr stark in den Auftritt ein, die Fokussierung per CSS kann jedoch jederzeit nachjustiert werden ohne viel Aufwand. Es muss ein Verständnis dafür entstehen, dass für einen Tastaturnutzer der jeweils aktive Tabzustand erkennbar sein muß und :focus und :active lebenswichtig sind.

Das Konzept der Sprungmarken muss neu überdacht werden, wenn sie über eine bestimmte Zahl hinausgehen. Da ist vieles gut gemeint, aber für den Tastatur- und Screenreader-Nutzer bedeutet das schlicht einen immensen Mehraufwand. Wichtig sind Sprungmarken – wie der Name ja auch schon sagt -, um schneller auf der Seite zwischen den Inhalten zu navigieren. Da ist eine Sprungmarke von unten nach oben viel wichtiger, als eine Ersatznavigation anzubieten, die auf weitere inhaltliche Bereiche der Webseite führt (wie Login, Registrierung, Inhaltsverzeichnis).

Ebenso sollte das Konzept des Tabindex relativiert werden. Wenn ein Auftritt inhaltlich linear gebaut wird, ist ein zusätzlicher Tabindex eigentlich nicht mehr nötig. Die quasi natürliche Abfolge sorgt bei Tastaturnutzern dann für einen sinnvollen und reibungslosen Ablauf.

Im Grunde wäre es nicht viel Aufwand, einige der Probleme für Tastaturnutzer schnell zu beheben. Das würde ich mir wünschen und sei es auch nur das Ergebnis dieser Tab Parade, dass sich mehr in Richtung Tastaturnutzung bewegt.