2.4.7 Fokus sichtbar

Was bedeutet das?

Die Fokusanzeige ist für Tastaturnutzer das, was der Mauszeiger für alle anderen ist. Fehlt sie, wissen sie nicht, wo sie sich befinden und was beim nächsten Tastendruck passiert.

Browser zeigen von sich aus einen Fokusrahmen. Häufig wird er aber per CSS entfernt, weil er beim Klicken stört. Mit :focus-visible lässt sich der Rahmen gezielt nur bei Tastaturbedienung zeigen. Wie kontrastreich der Rahmen sein muss, regelt Kriterium 1.4.11.

Wem hilft das?

• Tastaturnutzer, ob mit oder ohne Behinderung
• Menschen mit Sehschwäche, die den Fokus auf dem Bildschirm verfolgen
• Menschen mit Aufmerksamkeitsstörungen, die sonst den Faden verlieren

Typische Fehler

• Ein globales outline: none oder outline: 0 ohne Ersatz
• Eigene Knöpfe und Links, deren Fokusstil sich kaum vom Normalzustand unterscheidet
• Fokusrahmen, die durch overflow: hidden abgeschnitten werden
• Elemente, die beim Fokussieren unsichtbar bleiben, etwa ein Sprunglink außerhalb des Bildschirms

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Ist der Tastaturfokus immer deutlich sichtbar? Elemente ohne erkannten Fokusstil sind markiert.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

*:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}
.sprunglink:not(:focus) {
  position: absolute;
  left: -9999px;
}

Bei Tastaturbedienung erscheint ein deutlicher Rahmen mit Abstand zum Element, und der Sprunglink wird sichtbar, sobald er fokussiert ist.

Praxistipps

• Tabben Sie einmal durch jede Seitenvorlage und prüfen Sie, ob Sie den Fokus an jeder Stelle sofort erkennen.

Ratgeber und Muster dazu

• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.
• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.
• BFSG-Prüfung: So lassen Sie Ihre Website auf Barrierefreiheit prüfenDas BFSG verlangt barrierefreie Angebote, aber kein bestimmtes Prüfverfahren. Hier steht, welche Prüfung was leistet, wie ein Audit abläuft, was es bei uns kostet und was Sie danach in der Hand haben.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.4.7 Focus Visible