Zum Inhalt springen

WCAG 2.4.11 · WCAG-Modul

Sichtbarer Fokus-Indikator

Wer per Tab navigiert, weiß immer wo. Kein verschwindender Outline.

Was ist das?

Was bedeutet „Sichtbarer Fokus-Indikator"?

Der Fokus-Indikator ist die sichtbare Markierung, die zeigt, welches Element gerade per Tastatur angesteuert ist. Browser-Default ist meist ein dünner blauer Outline. Viele Themes entfernen diesen Outline („sieht hässlich aus") — und brechen damit die Tastatur-Bedienbarkeit für jeden, der nicht mit der Maus arbeitet.

Warum wichtig?

Pflicht und Nutzen — WCAG 2.4.11.

WCAG 2.4.11 (Focus Appearance) verlangt einen Fokus-Indikator mit klarem visuellem Unterschied — mindestens 2 CSS-Pixel dick, Kontrast 3:1 zum Umgebenden. Ohne sichtbaren Fokus ist Tastatur-Navigation faktisch unmöglich (man weiß nicht, wo Enter einen hin schickt). Plus Pflicht: :focus-visible trennt Maus-Klick (kein Outline nötig) von Tab-Fokus (Outline Pflicht) — saubere UX.

Unsere Umsetzung

Wie wir es konkret lösen.

  • Globaler Fokus-Stil: 3 px solid Brand-Farbe + 3 px Offset, border-radius 6 px — gut sichtbar, AAA-Kontrast.
  • :focus-visible statt :focus — Maus-Klicks erhalten keinen Outline, Tab-Fokus schon.
  • Niemals globales outline: none ohne Ersatz.
  • Custom-Komponenten (Karussells, Custom-Dropdowns) bekommen explizit eigene Focus-States.
  • Verifikation: Tastatur-Walkthrough — jedes interaktive Element muss bei Fokus eindeutig erkennbar sein.
Weitere WCAG-Module

Verwandte Bausteine unserer Modulsuite

Alle Module in der BFSG-Übersicht →

Brauchen Sie genau dieses Modul?

15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.

Erstgespräch buchen

Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs

Leichte Sprache