Drücke auf Deiner eigenen Seite einmal die Tab-Taste, mehrmals hintereinander. Wandert dabei eine sichtbare Markierung von Link zu Link, von Knopf zu Knopf? Oder passiert scheinbar nichts? Diese kleine Probe verrät Dir in zehn Sekunden, ob ein wichtiges Stück Orientierung auf Deiner Seite vorhanden ist.
Viele Menschen steuern das Web ohne Maus, allein über die Tastatur. Sie brauchen eine Markierung, die ihnen zeigt, welches Element gerade aktiv ist. Genau diese Markierung heißt Fokus-Indikator. Fehlt sie, tappen diese Besucher im Dunkeln. Das Problem ist sichtbar, sobald man weiß, worauf man achtet, und es lässt sich beheben.
Was der Tastatur-Fokus ist
Wer mit der Tastatur arbeitet, springt mit der Tab-Taste von einem bedienbaren Element zum nächsten: zum nächsten Link, zur nächsten Schaltfläche, ins nächste Eingabefeld. Immer ist genau ein Element an der Reihe. Dieses Element hat den Fokus.
Der Fokus ist also der Punkt, an dem die Tastatur gerade ansetzt. Drückst Du jetzt die Eingabetaste, wird genau dieses Element ausgelöst. Damit das Sinn ergibt, muss der Besucher sehen, wo der Fokus steht. Sonst weiß er nicht, was er gerade auslösen würde.
Sichtbar wird der Fokus durch den Indikator: meist ein Rahmen oder eine farbige Linie um das aktive Element. Wie sichtbar er mindestens sein muss, schärfen die neuen Kriterien der WCAG 2.2 noch einmal nach. Browser bringen so eine Markierung von Haus aus mit. Sie ist das Gegenstück zum Mauszeiger, nur eben für alle, die keine Maus benutzen. Wie das Tabben insgesamt funktioniert, zeigt der Beitrag zur Bedienung ganz ohne Maus im Detail.
Warum der sichtbare Rahmen oft fehlt
Der Standard-Rahmen der Browser sieht selten elegant aus. Oft ist es eine gepunktete oder blaue Linie, die nicht zum Design passt. Beim Feinschliff einer Seite stört dieser Rahmen das Auge, und so verschwindet er häufig: Jemand schaltet ihn ab, damit die Seite aufgeräumter wirkt.
Das passiert fast immer aus rein optischen Gründen, nicht aus böser Absicht. Mit der Maus sieht ja niemand den Rahmen, denn er erscheint nur beim Tabben. Wer die Seite ausschließlich mit der Maus testet, bemerkt den Verlust überhaupt nicht.
Genau hier liegt die Falle. Der Rahmen wird weggeräumt, weil er beim Mausklick nie auftaucht, und damit verschwindet er auch für die Menschen, die ihn dringend brauchen. Eine ganze Besuchergruppe verliert ihre Orientierung, ohne dass es beim üblichen Testen auffällt.
Der schnelle Selbsttest
Den wichtigsten Test machst Du selbst, in zwei Minuten und ohne jedes Werkzeug. Lade Deine Startseite, klicke einmal in einen leeren Bereich und lass danach die Maus liegen. Dann drückst Du wiederholt die Tab-Taste und beobachtest nur eines: Siehst Du bei jedem Druck deutlich, wo Du gerade bist?
Achte dabei auf diese Punkte:
- Sichtbarkeit: Erscheint überhaupt eine Markierung, oder bleibt der Bildschirm scheinbar unverändert?
- Deutlichkeit: Erkennst Du die Markierung auf einen Blick, oder musst Du suchen?
- Lückenlosigkeit: Bleibt die Markierung auf jedem Element sichtbar, oder verschwindet sie an manchen Stellen?
Wandert die Markierung bei jedem Tab klar erkennbar weiter, ist alles in Ordnung. Bettest Du diese Probe in einen vollständigen Tastatur-Walkthrough Deiner Seite ein, findest Du auch die Stellen, die der schnelle Blick übersieht. Verschwindet sie irgendwo, oder siehst Du gar nichts, hast Du eine konkrete Stelle zum Nachbessern gefunden.
Woran Du einen guten Fokus erkennst
Ein guter Fokus-Indikator macht keine Rätsel. Du erkennst sofort, welches Element gerade aktiv ist, ohne den Bildschirm abzusuchen. Drei Eigenschaften machen ihn aus.
Erstens ist er deutlich. Eine kräftige Umrandung oder ein klarer Farbwechsel hebt das aktive Element sichtbar vom Rest ab. Eine hauchdünne, blasse Linie reicht dafür nicht.
Zweitens ist er kontrastreich. Die Markierung hebt sich gut vom Hintergrund und vom Element selbst ab, damit sie auch bei schwächerem Sehvermögen auffällt. Ein heller Rahmen auf hellem Grund geht unter. Wie Kontrast generell wirkt, beschreibt der Beitrag über lesbare Farbkontraste.
Drittens ist er überall vorhanden. Jeder Link, jede Schaltfläche und jedes Eingabefeld zeigt die Markierung, ohne Ausnahme. Wie der Fokus beim Seitenwechsel in SPAs sauber gesetzt wird, damit er nach jedem Routing nicht verloren geht, vertieft der eigene Beitrag. Genau das brauchst Du auch bei den Links und Schaltflächen Deiner Seite, damit sie sich zuverlässig bedienen lassen.
Häufige Fehler
Der häufigste Fehler ist der komplett abgeschaltete Rahmen. Die Seite sieht damit auf den ersten Blick sauberer aus, doch beim Tabben passiert sichtbar nichts mehr. Wer keine Maus führt, ist dann verloren.
Fast ebenso oft ist die Markierung zwar da, aber zu schwach. Eine blasse, dünne Linie verschwindet vor unruhigen Hintergründen oder Bildern. Auf dem Papier ist der Fokus vorhanden, in der Praxis sieht ihn kaum jemand.
Ein weiterer Stolperstein sind einzelne Lücken. Auf den meisten Elementen klappt die Markierung, aber ausgerechnet das aufklappende Menü oder ein selbstgebauter Schalter zeigt sie nicht. Solche Lücken findest Du nur, wenn Du beim Selbsttest wirklich jedes Element durchgehst. Besonders aufmerksam wirst Du bei eingeblendeten Dialogen, denn dort muss der Fokus sauber wandern und im Fenster bleiben, wie es der Beitrag zu barrierefreien Modals und Pop-ups zeigt.
Den sichtbaren Fokus klar beauftragen
Du musst nichts selbst umbauen. Wenn der Selbsttest eine Schwäche zeigt, reicht ein klarer Auftrag an die Person, die Deine Seite betreut. Beschreibe einfach, was Du beobachtet hast: An welchen Stellen siehst Du beim Tabben keine Markierung?
Bitte konkret darum, dass der sichtbare Fokus auf allen bedienbaren Elementen erhalten bleibt und deutlich genug ist. Das ist für jede Fachperson eine verständliche und schnell umsetzbare Aufgabe.
Halte dabei fest, dass der Fokus nicht aus optischen Gründen verschwinden darf. Ein dezenter, aber klar erkennbarer Indikator lässt sich gut ins Design einfügen, ohne dass die Seite unruhig wirkt. Das gehört zu einer Navigation, die für alle funktioniert ohnehin dazu.
Fazit
Der Fokus-Indikator ist eine kleine Sache mit großer Wirkung. Er zeigt allen, die ohne Maus unterwegs sind, wo sie gerade stehen, und entscheidet damit, ob sie Deine Seite überhaupt bedienen können.
Die Prüfung kostet Dich zwei Minuten Tab-Drücken, und der Auftrag an Deine Agentur ist in einem Satz formuliert. Damit holst Du eine ganze Besuchergruppe zurück, die sonst stillschweigend ausgesperrt bleibt.