2.4.7 Focus Visible

WCAG – Definition

Jedes interaktive Element (Link, Button, Formularfeld usw.), das mit der Tastatur erreichbar ist, muss im Fokuszustand visuell erkennbar sein.

Bedeutung

  • Nutzer, die mit Tastatur oder assistiven Technologien navigieren, brauchen eine klare Rückmeldung, wo sie sich gerade befinden.

  • Ohne sichtbaren Fokus ist es unmöglich, eine Seite effizient oder sicher zu bedienen.

  • Auch Menschen ohne Einschränkungen profitieren (z. B. Power-User, die Tastaturbefehle nutzen).

Ausreichende Techniken

Standard-Fokus nicht entfernen

Browser haben von Haus aus Fokusrahmen (outline). Nie komplett entfernen:

a:focus,
button:focus {
  outline: 2px solid #005fcc;
}

Eigene gut sichtbare Fokusgestaltung

button:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
  border-radius: 4px;
}

Fokusmanagement bei dynamischen Inhalten

  • Modale Dialoge → beim Öffnen Fokus ins Dialog setzen.

  • Skip-Links → Fokus springt korrekt zum Hauptinhalt.

document.querySelector('.skip-link').addEventListener('click', e => {
  const target = document.getElementById('main');
  target.setAttribute('tabindex', '-1');
  target.focus();
});

Sichtbarer Fokus für benutzerdefinierte Komponenten

Eigene UI-Elemente (Dropdowns, Tabs) müssen per CSS/JS einen Fokusstil bekommen.

.custom-select:focus {
  box-shadow: 0 0 0 3px #4cafef;
}

Beratungstechnicken

  • Kontrast beachten: Fokus-Indikator muss sich deutlich vom Hintergrund abheben.

  • Konsistenz: auf allen Seitenelementen gleicher Stil.

  • Nicht nur Farbe nutzen – auch Outline oder Schatten für bessere Sichtbarkeit.

  • Bewegungspräferenz respektieren (prefers-reduced-motion), wenn Fokus mit Animation hervorgehoben wird.

  • Design-Abstimmung: Fokus darf nicht als „Fehlerzustand“ missverstanden werden.

Fehler

  • Fokus komplett entfernt (outline: none;).
  • Fokusfarbe zu schwach (z. B. hellgrau auf weiß).
  • Nur subtile Änderungen (leichte Farbnuance) – für viele Nutzer kaum sichtbar.
  • Dynamische Inhalte öffnen, ohne den Fokus korrekt zu setzen (z. B. Modal öffnet → Fokus bleibt dahinter).
  • Fokus verschwindet hinter fixen Headern oder Overlays (→ deshalb auch neue SCs in WCAG 2.2: 2.4.11–2.4.13).