Sichtbarkeit des Tastaturfokus auf Webseiten

Der Tastaturfokus markiert jeweils das Element, das der Nutzer mit seiner Tastatur angesteuert hat. Ein eindeutiger Tastaturfokus auf einer Webseite ist wichtig, damit Menschen mit einer Sehbehinderung diese gut benutzen können. Wie das allerdings in der Praxis aussieht, beschreibt dieser Beitrag.
Verschwommener Computerbildschirm im Hintergrund, im Vordergrund liegt eine Brille, durch deren Gläser ein kleiner Teil des Bildschirms scharf wird. Es sind verschiedene geöffnete Programme erkennbar.

In unserer Testarbeit treffen wir immer wieder die gleichen Accessibility Mängel an. Ein Erfolgskriterium der WCAG 2.0, dass wir eigentlich immer als nicht erfüllt bewerten müssen ist das Erfolgskriterium 2.4.7 Fokus sichtbar, welches der Stufe 2 angehört.

Um dieses Erfolgskriterium zu testen braucht man keinerlei Fachkenntnisse über Accessibility oder über Hilfsmittel für Menschen mit einer Behinderung. Es reicht aus wenn man die beiden Browser Mozilla Firefox und den Internet Explorer in den neusten Versionen installiert hat. Und ganz wichtig man muss die Tastatur seines Computers so gut kennen, dass man weiss welche Taste die Tabulator-Taste ist.

Um was geht es beim Erfolgskriterium 2.4.7 eigentlich?

Nicht alle Menschen mit einer körperlichen Behinderung sind in der Lage eine Maus zu bedienen. sehbehinderte und blinde Menschen arbeiten ebenfalls teilweise oder ganz mit der Tastatur. Dies als informativer Einschub.

In diesem Beitrag geht es aber nicht um die Arbeitsweise von blinden Menschen, sondern die Arbeitsweise von körperlich und sehbehinderten Menschen, welche mit der Tastatur im Web unterwegs sind. Um aber eine Webseite mit der Tastatur bedienen zu können, müssen die Elemente die im Browser den Fokus erhalten können auch dann erkennbar sein, wenn diese den Tastaturfokus erhalten und nicht nur wenn der Anwender mit der Maus darauf zeigt und das Element anklickt. Ich überlasse es der Phantasie des geneigten Lesers, sich vorzustellen, wie sich eine Website mit der Tastatur bedienen Lässt bei der nicht sichtbar ist welches Element den Tastaturfokus hat.

Was wir während des Testens ganz oft antreffen

ist, dass entweder der Tastaturfokus gar nicht sichtbar ist oder dass nur der Standard-Fokus des Browsers verwendet wird. Der Standard-Fokus besteht aus einer gepünktelten Linien um die Links, welche gerade den Tastatur-Fokus haben.

Beispiel 1: Nur schlecht sichtbarer Standard-Fokus auf der Site der Stadt Luzern
Beispiel 1: Stadt Luzern Rubrik» Lebenslagen Geburt» (http://www.stadtluzern.ch/de/lebenslagen/geburt/)
Beispiel 2: Startseite der "Neue Zürcher Zeitung". Nur schlecht sichtbarer Standard-Fokus
Beispiel 2 Startseite der «neuen Zürcherzeitung» http://www.nzz.ch/
Beispiel 3:Startseite der "Neue Zürcher Zeitung" fast nicht sichtbarer Standard-Fokus in der Navigation
Beispiel 3: Startseite der «Neuen Zürcherzeitung» . Der Tastatur-Fokus ist nicht beim Link Startseite. wie man meinen könnte sondern beim Link «Zürich». Die Startseite ist die aktuelle Seite.

Und so sieht ein gut sichtbarer Tastaturfokus aus:

Gut sichtbarer Fokus auf der Startseite von der Stiftung "Zugang für alle"
Startseite Stiftung «Zugang für alle » http://www.access-for-all.ch/

Wie wird das Erfolgskriterium 2.4.7 getestet?

Ganz einfach Die zu testende Site wird im Browser aufgerufen . Nachdem die Seite geladen wird mit der Tabulator-Taste von fokussierbarem Element zu fokussierbarem Element gesprungen
In den Browsern lassen sich folgende Elemente mit der Tastatur fokussieren.

  • Links
  • Eingabefelder in Formularen
  • Checkboxen in Formularen
  • Dropdownlisten in Formularen
  • Schalter in Formularen
  • Flash-Objekte sofern diese nicht in Firefox eine Tastaturfalle darstellen.

Wenn der Tastaturfokuds gut sichtbar ist und jederzeit verfolgt werden kann an welcher Stelle auf der Seite sich gerade der Fokus befindet ist das Erfolgskriterium 2.4.7 erfüllt. Bei der Beurteilung ob der Tastaturfokus gut sichtbar ist sollte nicht vergessen werden, dass es Menschen mit einer Sehbehinderung gibt und diese z. B. den Standard-Fokus der Browser nicht gut oder gar nicht erkennen können.

Da die verschiedenen Browser den Tastaturfokus unter Umständen anders darstellen können muss das Erfolgskriterium möglichst mit den beiden weitverbreiteten Browsern Mozilla Firefox und Internet Explorer überprüft werden. Unter Umständen verarbeiten die Browser CSS auch anders, so dass z. B in einem Browser der Tastaturfokus sichtbar ist und im anderen nur schlecht oder gar nicht.

Was kann man tun um das Erfolgskriterium 2.4.7 zu erfüllen?

Im Dokument «Wie man WCAG 2.0 erfüllt«, welches es in deutscher Sprache gibt findet man verschiedene Techniken um WCAG 2.0 zu erfüllen.

Eine Technik um das Erfolgskriterium 2.4.7 ist die folgende «C15: Benutzung von CSS, um die Darstellung eines Bestandteils der Benutzerschnittstelle zu verändern, wenn diese den Fokus erhält»

Das Dokument «»Wie man WCAG 2.0 erfüllt» empfehlen wir als Nachschlagewerk wenn es darum geht herauszufinden wie bestimmte Erfolgskriterien erfüllt werden können.

3 Kommentare zu “Sichtbarkeit des Tastaturfokus auf Webseiten

  1. Ich finde auch für Menschen ohne Einschränkungen den Tab-Fokus sinnvoll. Da ich sehr oft den Tabulator auf Websites nutze. Allerdings wäre es toll, wenn sich ZfA ebenfalls an WCAG hält. Wenn ich den Tabulator hier im Blog nutze, werden zwar wunderbar alle Links optisch hervorgehoben. Jedoch die Farbkontraste sind dermassen schlecht, dass es besser wäre den Fokus weg zu lassen. Dunkelblauer Hintergrund mit dunkelblauer Schrift ist nicht gerade toll.

  2. Hallo Priska,

    Danke für Ihren Kommentar.
    Es ist richtig das die Kombination dunkelblauer Hintergrund und dunkelblaue Schrift nicht gerade ideal ist.

    Darf ich Sie bitten uns mit zuteilen mit welchen Browser Sie arbeiten. Ich arbeite mit IE 9 und Firefox 13.0.1. und da werden die Links welche den Tastaturfokus haben gelb hervor gehoben, so dass man dann gelben Hintergrund und blaue Schrift hat.

  3. Ah ok. Ich arbeite mit dem IE7.

    Habe es jetzt jedoch noch bei Firefox 3.6 und Chrome getestet. Dort werden die Links tatsächlich korrekt in Gelb dargestellt.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .