Prüfpunkt 2.4.7Stufe AATastatur und Fokus
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.
Beispiele
Fokusrahmen entfernt
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none macht die Tastaturbedienung blind. :focus-visible zeigt den Rahmen nur bei Tastatur, nicht beim Mausklick.
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.
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.
Foto: Glenn Carstens-Peters, CC0
.jpg){kind=link}