Fokus-Indikatoren

Sichtbarer Fokus Muss

Jedes interaktive Element muss einen deutlich sichtbaren Fokus-Indikator haben (WCAG 2.4.7). Browserseitige Fokus-Stile dürfen nur entfernt werden, wenn ein gleichwertiger oder besserer Ersatz definiert wird.

/* Niemals ohne Ersatz: */
*:focus { outline: none; }  /* ❌ Verboten */

/* Stattdessen: */
*:focus-visible {
  outline: 3px solid #1a56c2;
  outline-offset: 2px;
}  /* ✅ Richtig */

Fokus nicht verdeckt Muss

Fokussierte Elemente dürfen nicht vollständig von anderen Inhalten verdeckt werden – z.B. durch Sticky Headers, Cookie-Banner oder Overlays (WCAG 2.4.11).

Fokus-Erscheinung Soll

Der Fokus-Indikator soll (WCAG 2.4.13):

• Mindestens 2px breit sein
• Ein Kontrastverhältnis von mindestens 3:1 zum umgebenden Hintergrund haben
• Das gesamte Element umschliessen (nicht nur eine Seite)

:focus vs. :focus-visible Soll

Verwende :focus-visible statt :focus, um Fokus-Indikatoren nur bei Tastaturnavigation anzuzeigen – nicht bei Mausklicks. Das verbessert die Ästhetik ohne Barrierefreiheit zu opfern.