Konzepte

Fokus

Auch: keyboard focus

Das aktuell aktive Element, das Tastatureingaben empfängt. WCAG verlangt einen sichtbaren Fokusindikator (2.4.7) und eine logische Fokusreihenfolge (2.4.3). Mit Tab und Shift+Tab wird der Fokus durch interaktive Elemente bewegt.

Fokus ist der Zustand, in dem ein Element aktiver Empfänger von Tastatureingaben ist. Zu jedem Zeitpunkt kann nur ein Element auf einer Seite den Fokus halten, und der visuelle Indikator dieses Zustands — der Fokusring — ist die wichtigste Orientierungshilfe für Tastatur-, Schalter- und Screenreader-Nutzer.

Warum Fokus wichtig ist

Ein bedeutender Teil der Nutzenden navigiert das Web ausschließlich ohne Maus:

  • Tastaturnutzer mit motorischen Behinderungen, die das Zeigen erschweren oder unmöglich machen.
  • Schalternutzer, die Oberflächen mit Einzeltasten oder Sip-and-Puff-Geräten bedienen.
  • Screenreader-Nutzer, die auch auf Touchscreens die Tastaturschnittstelle verwenden.
  • Sprachsteuerungsnutzer (z. B. „Klick auf Senden“), deren Tools Befehle durch Abgleich fokussierbarer Elemente auflösen.

Für all diese Nutzenden ist der Fokus der Cursor. Wo sich der Fokus befindet, wohin er als nächstes geht und wie er aussieht, entscheidet darüber, ob die Seite überhaupt nutzbar ist.

Die Fokusregeln der WCAG

WCAG 2.x und 2.2 enthalten mehrere Erfolgskriterien zum Thema Fokus:

  • 2.1.1 Tastatur (A) — alle Funktionen müssen per Tastatur bedienbar sein.
  • 2.1.2 Keine Tastaturfalle (A) — Tastaturnutzer müssen den Fokus von jedem fokussierbaren Element ausschließlich per Tastatur wegbewegen können.
  • 2.4.3 Fokusreihenfolge (A) — die Fokusreihenfolge muss logisch und sinnvoll sein.
  • 2.4.7 Fokus sichtbar (AA) — das fokussierte Element muss einen sichtbaren Indikator aufweisen.
  • 2.4.11 Fokus nicht verdeckt (AA, neu in WCAG 2.2) — fixe Kopfzeilen, Cookie-Banner und schwebende Chat-Widgets dürfen ein fokussiertes Element nicht vollständig verbergen.
  • 2.4.13 Fokusdarstellung (AAA, neu in 2.2) — der Fokusindikator muss bestimmte Anforderungen an Fläche und Kontrast erfüllen.

Häufige Fehlerbilder

  • outline: none ohne Ersatz. Designer entfernen den Standard-Ring, weil er nicht zur visuellen Gestaltungssprache passt, und vergessen, ihn durch eine gestylete Alternative zu ersetzen. Dies ist ein Level-AA-Verstoß und der häufigste überhaupt.
  • Fokus nur auf :focus-visible, nicht auf :focus. Best Practice ist heute :focus-visible, damit der Ring nur bei Tastaturnavigation erscheint, nicht bei Mausklicks. Das ist korrekt — aber der Indikator auf :focus-visible muss trotzdem den AA-Kontrastanforderungen genügen.
  • Verlorener Fokus nach dynamischen Aktionen. Nach dem Schließen eines Dialogs muss der Fokus zum auslösenden Element zurückkehren. Nach dem Löschen einer Zeile muss er zu einem sinnvollen Nachbarelement wechseln. Andernfalls landet der Nutzende an einer beliebigen Stelle (oft im Dokument-Body) und muss von Anfang an mit Tab navigieren.
  • Fokus unter fixem Chrome verborgen. Ein fokussierter Link 50 Pixel vom Seitenanfang liegt hinter der ebenfalls 50 Pixel hohen fixen Kopfzeile. Der Nutzende navigiert per Tab in scheinbare Leere. Als Abhilfe scroll-padding-top gleich der Kopfzeilenhöhe setzen oder bei Überlappung das fokussierte Element ins Sichtfeld scrollen.

Das schnellste manuelle Audit

Mit Tab von der Adressleiste bis zur Fußzeile durch jede Seite navigieren. Wenn an irgendeiner Stelle nicht erkennbar ist, wo der Fokus liegt, ein interaktives Element nicht erreichbar ist oder man in einer Fokusfalle steckt, schlägt die Seite bei 2.4.7 oder 2.1.2 fehl.