Barrierefreiheit · Prüfpunkt
Warum muss der Tastaturfokus auf einer Website sichtbar sein?
Der Tastaturfokus muss sichtbar sein, weil Tastaturnutzer sonst blind steuern: Ohne sichtbare Markierung — meist ein farbiger Rahmen um das aktive Element — ist nicht erkennbar, welches Element gerade ausgewählt ist und was die Eingabetaste im nächsten Moment auslöst. Viele Gestalter entfernen diesen Rahmen aus optischen Gründen und sperren damit Tastaturnutzer aus. Das WCAG-Kriterium 2.4.7 verlangt eine sichtbare Fokus-Anzeige.
Der Fokusrahmen ist der Mauszeiger der Tastatur
Mausnutzer sehen jederzeit, wo ihr Zeiger steht. Tastaturnutzer haben dafür den Fokusrahmen: Er wandert mit jedem Druck auf die Tabulatortaste zum nächsten Element und zeigt an, was die Eingabetaste auslösen würde. Verschwindet dieser Rahmen, wird die Bedienung zum Ratespiel — wie Mausbedienung mit unsichtbarem Zeiger. Der häufigste Grund ist eine einzige Zeile in den Gestaltungsvorgaben, die die Standard-Umrandung des Browsers abschaltet, weil sie als störend empfunden wurde. Die richtige Lösung ist nie das Entfernen, sondern das Gestalten: ein Rahmen in Ihrer Firmenfarbe, kräftig genug, um auf jedem Hintergrund aufzufallen.
So misst der Prüfservice die Fokus-Sichtbarkeit per Pixel-Vergleich
Der Prüfservice fotografiert jedes geprüfte Bedienelement zweimal: einmal ohne, einmal mit Fokus. Dann vergleicht er beide Aufnahmen Bildpunkt für Bildpunkt. Verändert der Fokus weniger als 0,2 Prozent der Bildpunkte in der Umgebung des Elements, ist die Fokus-Anzeige praktisch unsichtbar — das Kriterium gilt als verstoßen, und der Bericht nennt das betroffene Element samt Beleg-Bildschirmfoto. Unruhige Umgebungen, etwa durch Animationen, erkennt die Messung an einem Vorab-Vergleich zweier Aufnahmen ohne Fokus und nimmt solche Elemente aus der Wertung. Zusätzlich vermerkt der Bericht, wenn die Gestaltungsvorgaben Fokus-Umrandungen pauschal abschalten.
So gehen Sie es an
- Tabben Sie durch Ihre Startseite und beobachten Sie: Ist bei jedem Halt klar erkennbar, welches Element gerade ausgewählt ist?
- Bitten Sie Ihre Agentur, jede Regel zu entfernen, die die Fokus-Umrandung pauschal abschaltet.
- Lassen Sie einen gestalteten Fokusrahmen in Ihrer Firmenfarbe definieren — kräftig genug für helle und dunkle Hintergründe.
- Prüfen Sie den Fokus auch auf Bildern und farbigen Flächen — ein dünner grauer Rahmen verschwindet dort schnell.
Häufige Fragen
Was ist der Fokusrahmen auf einer Website?
Der Fokusrahmen ist die sichtbare Markierung um das gerade aktive Bedienelement — meist eine farbige Umrandung um Link, Schaltfläche oder Eingabefeld. Er wandert mit jedem Druck auf die Tabulatortaste weiter und zeigt Tastaturnutzern, was die Eingabetaste auslösen würde. Browser bringen einen Standard-Rahmen mit; Websites dürfen ihn umgestalten, aber nie ersatzlos entfernen.
Warum entfernen Designer die Fokus-Umrandung?
Weil der Standard-Rahmen des Browsers auch beim Mausklick kurz aufblitzen kann und manchen als unruhig gilt. Das Abschalten trifft aber die Falschen: Mausnutzer bemerken den Unterschied kaum, Tastaturnutzer verlieren ihr einziges Orientierungsmittel. Die saubere Lösung ist ein gestalteter Rahmen in der eigenen Firmenfarbe — er fügt sich ins Design und bleibt sichtbar.
Wie prüft der Prüfservice, ob der Fokus sichtbar ist?
Mit einem echten Pixel-Vergleich: Jedes geprüfte Element wird ohne und mit Fokus fotografiert, beide Aufnahmen werden Bildpunkt für Bildpunkt verglichen. Ändert der Fokus weniger als 0,2 Prozent der Bildpunkte, gilt die Anzeige als unsichtbar und das Kriterium als verstoßen — mit Beleg-Bildschirmfoto im Bericht. Elemente in unruhiger, animierter Umgebung nimmt die Messung aus der Wertung.
Weiter im Prüfbereich Barrierefreiheit
- Warum darf ein fixierter Kopfbalken den Tastaturfokus nie ganz verdecken?Fixierte Leisten und Cookie-Hinweise dürfen das fokussierte Element nie vollständig überlagern. Das verlangt das neue WCAG-2.2-Kriterium 2.4.11.
- Warum brauchen Wischgesten eine einfache Klick-Alternative?Wisch- und Mehrfinger-Gesten kann nicht jeder ausführen. WCAG 2.5.1 verlangt für jede solche Geste einen gleichwertigen Weg mit einfachen Tipps.
- Warum soll ein Klick erst beim Loslassen auslösen?Löst ein Klick erst beim Loslassen aus, lässt sich ein Fehlgriff abbrechen: Finger zur Seite ziehen, außerhalb loslassen. Das verlangt WCAG 2.5.2.
- Warum muss die sichtbare Beschriftung im hinterlegten Namen vorkommen?Sprachsteuerungs-Nutzer sprechen, was sie sehen. Weicht der hinterlegte Name einer Schaltfläche vom sichtbaren Text ab, läuft der Befehl ins Leere.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.