Tab Parade: seniorkom.at

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.

15.10. bis 25.11.2008Ich 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?

Fehlender oder unzureichender Tastaturfokus in der Naivgation

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.

Aktueller Navigationsfokus mit und ohne Farben

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?

Sprungmarken ohne CSS

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

Ausschnitt versteckte Sprungmarken mit Accesskeys

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

Kommentierte durchgezählte Tastaturreihenfolge im Kopfbereich der Webseite

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

Webseite mit unterschiedlichen Farbkontrasten

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.

8 Antworten auf „Tab Parade: seniorkom.at“

  1. Mit viel Engagement recherchiert – Hut ab, Kollegin ;-)

    Ärgerlich auch hier: Das Projekt wurde ausgezeichnet und somit zur Nachahmung empfohlen. Die Laudatio ist überschwenglich.

    Immerhin hat man sich in diesem Projekt bei der Strukturierung der Inhalte wohl wirklich Mühe gegeben.

    Ob es Senioren (und auch jungen Menschen) möglich ist, diesen Link weiterzugeben, mag man bezweifeln:

    http://www.seniorkom.at/302/Content/sidfa07b4bbb90afffe6ef879aedf3266d4

    “sidfa07b4bbb90afffe6ef879aedf3266d4” = St. Pölten – ob das nicht menschenfreundlicher geht?

    Natürlich ist es besser, Webangebote, die auf einem guten Weg sind zu loben, als gar keinen Preis zu vergeben.
    Aber ich fände es ehrlicher, auch die Schwachstellen aufzuzeigen. Kritiklosigkeit und Realitätsferne, gepaart mit möglicherweise fehlender Sachkenntnis bei der Bewertung führen zu Preisträgern, die zumindest nicht diesen sehr hoch gehängten Ehrenkranz wert sind.

    BTW: Ein Webprojekt mit Auszeichnung und Lob dieser Güte sollte dann auch standardkonform bei HTML und CSS sein, oder?

  2. @Peter K.

    Zum einen ist klar, Wettbewerbe sollen zwar potentiell die Besten auszeichnen, aber das kommt dann immer auf den gesamten Kontext an. Im Übrigen ist die Webseite nicht für Barrierefreiheit ausgezeichnet worden, sondern für Aging Well, was wohl soviel meint – wenn ich das richtig lese -, die Interessen älterer Menschen im Web zu stärken.

    Der Fokus auf Tastaturnutzer wird meisthin eher vernachlässigt, auch in explizit barrierefreien Projekten. Da gibt es noch ne ganze Menge zu tun. :)

    Zu Deiner Validitätsfrage: Validität ist Mittel, aber niemals reiner Zweck. Sieht man sich die Startseite von seniorkom.at an, kann man zwar Fehler finden, die beziehen sich jedoch auf den Rahmen XHTML strict. Damit meine ich, dass die Seite durchaus sehr valide ist, aber noch Restbestände vom etwa durch ein CMS generierten transitional Zustand mitschleppt. Das halte ich jetzt durchaus für diskutierbar, aber eben nicht auf die Gesamtheit der Webseite anwendbar. Standardkonform heißt für mich viel mehr, wie die gesamte, semantische Struktur der Webseite aussieht. Ist das semantisch sinnvoll, wird auf die üblichen Strukturen zurückgegriffen etc..

    Aber das Ziel dieses Artikels war ja nur ein Ausschnitt: die Tastaturnavigation.

  3. Also, ich habe zwar keine Ahnung von Tastaturbedienung, komme aber bei der Postbankseite mit einmal Tab und viermal Cursor in die Navigation. Wie genau wird denn zwischen Tabulator-Tasten und Tastaturnavigation unterschieden?

  4. @Sascha Stoltenow
    mit der Postbankseite habe ich mich nicht beschäftigt. :) Ich glaube, das was Du hier meinst, sind verschiedene Formen der Tastaturnavigation. Mit dem Tabulator ist eine Variante, mit dem Cursor nennt sich das Caret Browsing.

  5. Pingback: MAIN_web » Blog Archiv » Eine Mütze Barrierefreiheit
  6. Zuerst ein Dankeschön an Sylvia Egger für die konstruktive Kritik an der Seniorkom-Seite.
    Ich bin Projektleiterin des Projekts und möchte natürlich gerne ein kurzes Feedback von uns geben.

    Die vorliegende Seite, also auch der Code, ist fast 5 Jahre alt. Auch wir sind mit dem derzeitigem Ergebniss nicht mehr zufrieden, daher wird das komplette HTML/CSS gerade neu gemacht. Wir rechnen mit der Fertigstellung Anfang Februar 2009.
    Gerade die Inputs mit den Tabs nehmen wir gerne auf. Leider werden es aber auch in Zukunft nicht weniger… da die Seite so umfangreich ist. Aber die Reihenfolge werden wir überdenken!

    (@ Peter K. : die SID-Nummer steht natürlich nicht für St. Pölten sondern für die Session ID. Der Bezirk wird über 302 mitgegeben – was zugegeben auch nicht ideal ist.)

  7. Hallo Frau Feuersinger,

    mein Kommentarsystem zeigt mir manchmal wohl nicht richtig an, wenn ich einen Kommentar erhalte, daher erst jetzt eine Rückmeldung. :)

    Es freut mich zu hören, dass sie noch an der Aufarbeitung dran sind, dann bin ich gespannt, wie die neue Seite im neuen Jahr erstrahlen wird.

    Schön, dass sie mit meiner Kritik konstruktiv umgehen und umgehen können, genau deswegen mache ich solche Analysen, dass Inhalte noch besser für alle zugänglich werden.

    Sylvia Egger

Kommentare sind geschlossen.