Fokusindikatoren in der Navigation: Was Tastaturnutzer sehen müssen

Ein Nutzer navigiert mit der Tabulatortaste durch dein Navigationsmenü. Er drückt Tab. Der Browser verschiebt den Fokus auf den nächsten Link. Aber er kann nicht erkennen, wo er sich befindet. Der Fokusindikator ist ein 1-Pixel breiter grauer Rahmen auf weißem Hintergrund – unsichtbar, wenn man nicht ganz genau hinschaut. Er drückt Tab erneut. Immer noch nichts Sichtbares. Er gibt auf und verlässt die Seite.

Du hast gerade einen Kunden verloren, der aktiv versuchte, deine Website zu nutzen.

Fokusindikatoren sind der unterschätzteste Teil der Tastaturnavigation. Die meisten Designer behandeln sie als Nebensache oder unterdrücken sie aktiv, weil sie „hässlich” aussehen. Aber für Tastaturnutzer – egal ob blind, motorisch beeinträchtigt oder nur effiziente Power-User – sind Fokusindikatoren der Cursor. Ohne sie ist Navigation unmöglich.

Die gute Nachricht: Effektive Fokusindikatoren zu entwerfen ist nicht schwer. Die schlechte Nachricht: Die meisten E-Commerce-Seiten machen es falsch, und WCAG 2.2 hat die Anforderungen noch erhöht.

Was WCAG 2.2 wirklich verlangt

WCAG 2.2, veröffentlicht im Oktober 2023, führte ein neues Level-AA-Kriterium speziell für Fokusindikatoren ein: Erfolgskriterium 2.4.11 Fokuserscheinung.

Frühere Richtlinien (WCAGs 2.1 Kriterium 2.4.7 Focus Visible) verlangten nur, dass der Fokus sichtbar sein musste – jeder sichtbare Indikator erfüllte die Anforderung. Aber „sichtbar” ist subjektiv. Ein 1-Pixel breiter hellgrauer Rahmen auf Weiß zählt technisch als sichtbar, ist aber funktional nutzlos.

WCAG 2.2 setzt spezifische Anforderungen:

Größenanforderung

Der Fokusindikator muss mindestens 2 CSS-Pixel dick über den gesamten Umfang der fokussierten Komponente sein oder eine äquivalente Fläche haben.

Was das in der Praxis bedeutet:

• Ein durchgehender 2px-Rahmen um einen Button: erfüllt die Anforderung
• Ein 1px-Rahmen: erfüllt die Anforderung nicht (wenn er nicht eine größere Fläche abdeckt)
• Ein 4px-Rahmen auf einer Seite: erfüllt die Anforderung nicht (deckt nicht den Umfang ab)
• Eine dicke Unterlinie unter einem Link, die 2px hoch und mindestens so breit wie der Linktext ist: erfüllt die Anforderung

Kontrastanforderung

Der Fokusindikator muss ein Kontrastverhältnis von mindestens 3:1 haben gegen:

1. Den nicht fokussierten Zustand der Komponente
2. Angrenzende Farben (Hintergrund hinter der Komponente)

Das ist schwieriger als gedacht. Wenn dein Navigations-Link dunkelblauer Text auf weißem Hintergrund ist und dein Fokusindikator ein hellblauer Rahmen ist, brauchst du:

• 3:1 Kontrast zwischen dem hellblauen Rahmen und dem weißen Hintergrund (angrenzende Farbe)
• 3:1 Kontrast zwischen dem hellblauen Rahmen und dem dunkelblauem Text (Komponentenfarbe)

Viele Designer wählen eine Markenfarbe für den Fokus, die großartig aussieht, aber eine dieser Kontrastprüfungen nicht besteht.

Das Problem mit dem Standard-Browser-Rahmen

Die meisten Browser bieten einen Standard-Fokusrahmen – normalerweise eine dünne gepunktete oder durchgezogene Linie. Chrome verwendet einen 2px blauen Rahmen. Firefox verwendet einen gepunkteten Rahmen. Safari verwendet einen blauen Glanz.

Diese Standards scheitern in vielen Kontexten an WCAG 2.2:

Forschung von WebAIM ergab, dass Standard-Fokus-Styles an Kontrastanforderungen bei ungefähr 78% der Farbkombinationen scheitern, die auf realen Websites verwendet werden.

Deshalb sind benutzerdefinierte Fokusindikatoren wichtig. Du kannst dich nicht auf Browser-Standards verlassen.

Wie gute Fokusindikatoren aussehen

Die besten Fokusindikatoren balancieren Sichtbarkeit, Markenkohärenz und Barrierefreiheit. Hier sind bewährte Muster von Top-E-Commerce-Websites.

Muster 1: Hochkontrast-Rahmen

Das häufigste Muster ist ein durchgehender Rahmen mit starkem Kontrast:

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Blau mit hohem Kontrast */
  outline-offset: 2px;        /* Abstand zwischen Element und Rahmen */
}

Das funktioniert gut für Navigations-Links, Buttons und Formular-Eingaben. Der 2px-Offset verhindert, dass der Rahmen Text oder Icon-Kanten überlappt und verbessert die Lesbarkeit.

Echtes Beispiel: Amazon verwendet einen 3px orangenen Rahmen (#FF9900) mit 2px-Offset auf allen interaktiven Elementen. Das Orange erreicht einen Kontrast von 6,8:1 auf weißen Hintergründen und 4,2:1 gegen ihre dunkelblauem Buttons.

Muster 2: Hintergrund + Rahmen-Kombination

Für eine straffe visuelle Integration kombinieren Sie eine Hintergrundfarbenänderung mit einem dünnen Rahmen:

a:focus,
button:focus {
  background-color: #E6F2FF; /* Hellblauer Hintergrund */
  outline: 2px solid #0066CC; /* Dunkelblauer Rahmen */
  outline-offset: 0;
}

Das ist besonders effektiv für Navigationsmenüs, wo du möchtest, dass der fokussierte Link aus dem Rest des Menüs herausragt.

Echtes Beispiel: Googles obere Navigation verwendet einen hellgrauen Hintergrund (#F1F3F4) mit einem 2px schwarzen Rahmen auf fokussierten Elementen. Der Hintergrund erzeugt einen klaren „ausgewählten” Zustand, während der Rahmen den erforderlichen Kontrast bietet.

Muster 3: Unterlinie für Text-Links

Für Inline-Text-Links im Content ist eine dicke Unterlinie oft klarer als ein Rahmen:

a:focus {
  outline: none; /* Standardrahmen entfernen */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

Das hält den Fokusindikator nah am Text und vermeidet das „Box um ein Wort”-Aussehen, das Rahmen erzeugen.

Echtes Beispiel: Shopifys Dokumentation verwendet eine 3px blaue Unterlinie auf fokussierten Links, positioniert 4px unter der Text-Grundlinie.

Muster 4: Schatten für interaktive Karten

Für kartenbasierte Layouts (Produktkarten, Feature-Boxen) erzeugt ein Box-Schatten Tiefe:

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

Die erste Schattenebene (0px Unschärfe, 3px Ausbreitung) wirkt als Fokusindikator. Die zweite fügt visuelle Tiefe hinzu.

Echtes Beispiel: Etsy verwendet einen 3px blauen Schatten um Produktkarten, wenn sie fokussiert sind, kombiniert mit einem subtilen Fallschatten für Tiefe.

Der :focus-visible Trick

Eine häufige Designer-Beschwerde über Fokusindikatoren ist, dass sie erscheinen, wenn Nutzer mit der Maus klicken, was einen „stecken gebliebenen” Rahmen nach dem Klick erzeugt. Das passiert, weil :focus bei jedem Focus-Ereignis auslöst – Maus, Tastatur oder programmgesteuert.

Die Lösung ist die :focus-visible Pseudo-Klasse, unterstützt in allen modernen Browsern seit 2022:

/* Fokusindikator nur für Tastaturnutzer anzeigen */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Standard-Rahmen für Mausnutzer verbergen */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

Das zeigt den Fokusindikator, wenn Nutzer mit der Tabulatortaste navigieren, verbirgt ihn aber, wenn sie mit der Maus klicken. Das Beste aus beiden Welten.

Wichtiger Vorbehalt: Einige Nutzer mit Motorbeeinträchtigungen verwenden sowohl Tastatur als auch Maus – sie können mit der Maus klicken, um ein Element zu fokussieren, dann die Tastatur zum Interagieren verwenden. Gehen nicht davon aus, dass :focus-visible nur „Screenreader-Nutzer” bedeutet. Es bedeutet „Tastaturnavigation im Gange.”

Testen deiner Fokusindikatoren

So testest du, ob deine Fokusindikatoren WCAG 2.2 erfüllen:

Schritt 1: Manueller Tastatur-Test

Öffne deine Website und drücke wiederholt Tab. Frag dich selbst:

• Kann ich immer sehen, wo der Fokus ist?
• Ist der Fokusindikator mindestens 2px dick?
• Unterscheidet er sich vom nicht fokussierten Zustand?
• Kann ich ihn auf hellen Hintergründen sehen? Auf dunklen Hintergründen?
• Verschwindet er oder wird schwer zu sehen beim Hover?

Wenn du auf irgendeine dieser Fragen „Nein” antwortest, hast du ein Fokusindikator-Problem.

Schritt 2: Kontrastverhältnis-Prüfung

Verwende ein Tool wie WebAIM’s Contrast Checker, um zu überprüfen:

1. Fokusindikator vs. Hintergrund: Gemessen das Kontrastverhältnis zwischen deiner Fokus-Rahmen-Farbe und dem Hintergrund hinter dem Element. Muss mindestens 3:1 sein.

2. Fokusindikator vs. Komponente: Gemessen das Kontrastverhältnis zwischen deiner Fokus-Rahmen-Farbe und der Hauptfarbe der Komponente (Textfarbe für Links, Hintergrundfarbe für Buttons). Muss mindestens 3:1 sein.

Wenn dein Fokusindikator #0066CC ist (ein häufiges Blau), prüfe es gegen:

• Weißer Hintergrund: 8,1:1 (erfüllt)
• Hellgrauer Hintergrund (#F5F5F5): 7,2:1 (erfüllt)
• Hellblauer Hintergrund (#CCE5FF): 2,2:1 (erfüllt nicht)

Wenn es scheitert, brauchst du eine dunklere oder hellere Fokusfarbe je nach Kontext.

Schritt 3: Automatisierter Audit

Führe diese Tools aus, um häufige Fokusindikator-Probleme zu fangen:

• axe DevTools (Browser-Erweiterung): Markiert fehlende Fokusindikatoren und niedrig-Kontrast-Rahmen
• Lighthouse Accessibility (in Chrome DevTools): Prüft auf fokussierbare Elemente ohne sichtbare Fokus-Styles
• WAVE (Web Accessibility Evaluation Tool): Hebt Fokusreihenfolge und Fokus-Sichtbarkeitsprobleme hervor

Keines dieser Tools erzwingt WCAGs 2.2-Größen- und Kontrastanforderungen perfekt (der Standard ist neu), aber sie fangen offensichtliche Probleme.

Häufige Fokusindikator-Fehler

Das sind die Fehler, die ich am häufigsten auf Shopify-Stores sehe:

Fehler 1: Fokus ganz unterdrücken

Viele Themes haben dieses CSS:

*:focus {
  outline: none;
}

Das entfernt alle Fokusindikatoren site-weit. Es ist der größte Barrierefreiheits-Fehler, den du machen kannst.

Warum das passiert: Designer mögen den Standard-Browser-Rahmen nicht und entfernen ihn ohne Ersatz.

Lösung: Entferne diese Regel und füge benutzerdefinierte Fokus-Styles mit :focus-visible hinzu.

Fehler 2: Unsichtbare Rahmen auf dunklen Hintergründen

Ein hellblauer Fokus-Rahmen sieht auf weißen Hintergründen großartig aus, verschwindet aber auf dunklen Navigationsleisten oder Footer-Bereichen.

Beispiel eines Fehlers:

a:focus {
  outline: 2px solid #66A3E0; /* Hellblau */
}

Auf einem dunkelblauem Hintergrund (#1A2332) hat dieser Rahmen nur 1,8:1 Kontrast – scheitert WCAG.

Lösung: Verwende verschiedene Fokusfarben für helle und dunkle Kontexte:

/* Heller Hintergrund */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Dunkelblau */
}

/* Dunkler Hintergrund */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* Weiß */
}

Oder verwende eine Hochkontrast-Farbe, die überall funktioniert, wie Schwarz auf hellen Hintergründen und Weiß auf dunklen.

Fehler 3: Fokusindikatoren kleiner als 2px

Dünne Rahmen scheitern an WCAGs 2.2-Größenanforderung:

button:focus {
  outline: 1px solid #0066CC; /* Zu dünn */
}

Lösung: Erhöhe auf mindestens 2px, oder verwende einen dickeren Rahmen auf einer Seite:

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Dicke Unterlinie */
}

Fehler 4: Nur auf Farbveränderung verlassen

Nur die Textfarbe oder Hintergrundfarbe beim Fokus zu ändern, scheitert, wenn die Änderung keinen klaren visuellen Indikator erzeugt:

a:focus {
  color: #0066CC; /* Text wird blau */
}

Das kann für sehende Nutzer sichtbar sein, aber Screenreader-Nutzer bekommen keine Anzeige, dass der Fokus sich bewegt hat. Und wenn die ursprüngliche Textfarbe bereits ähnlich wie Blau war, könnte die Änderung zu subtil sein.

Lösung: Füge immer einen Umfang-Indikator hinzu (Rahmen, Unterlinie oder Rand).

Fokusindikatoren für Mega-Menüs

Mega-Menüs stellen eine einzigartige Herausforderung dar, weil sie mehrere Navigationsebenen enthalten. Wenn ein Nutzer in ein Mega-Menü fokussiert, wohin sollte der Fokus gehen? Wenn er durch Untermenüs nach unten geht, wie zeigst du, welches Element fokussiert ist?

Hier ist ein robustes Muster:

/* Top-Level-Navigations-Element */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* Innerhalb der Element-Grenze */
  background-color: #F0F7FF;
}

/* Untermenü-Elemente */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Wichtige Details:

• Top-Level-Elemente verwenden outline-offset: -3px, um den Rahmen innerhalb der Element-Grenze zu zeichnen und die Überlappung mit angrenzenden Elementen zu vermeiden
• Untermenü-Elemente erhalten sowohl eine Hintergrundfarbe (um aus dem Gitter hervorzustechen) als auch einen Rahmen (um die WCAG-Größenanforderung zu erfüllen)

Echtes Beispiel: Navi+ Menu Builder generiert Mega-Menüs mit diesem Muster eingebaut – Top-Level-Elemente heben sich mit einer Hintergrundfarbe und einem Rahmen hervor, und Untermenüs verwenden Pfeiltasten-Navigation mit klaren Fokusindikatoren auf jedem Element.

Der Business-Fall für bessere Fokusindikatoren

Die meisten Store-Besitzer priorisieren Fokusindikatoren nicht, weil sie wie ein kleines visuelles Detail wirken. Aber die Auswirkung ist messbar.

WebAIMs 2024-Umfrage von Screenreader-Nutzern zeigte, dass 87% der Befragten „Tastaturnavigation” als das wichtigste Barrierefreiheits-Feature nannten, vor Alt-Text, semantischem HTML und ARIA-Labels. Innerhalb der Tastaturnavigation rangierte sichtbare Fokusindikatoren als top Frustration.

Wenn Nutzer nicht sehen können, wo sie auf der Seite sind, können sie Tasks nicht abschließen. Das übersetzt sich direkt in verloren gegangene Einnahmen.

Forschung des Baymard Institute über Checkout-Nutzbarkeit zeigt, dass „zu lang/komplizierter Checkout” 17% der Warenkorb-Abbrüche verursacht. Für Tastaturnutzer auf einer Website mit schlechten Fokusindikatoren ist jeder Checkout zu kompliziert – sie verbringen extra Zeit, um sich bei jedem Feld neu zu orientieren, oder brechen ab.

Umgekehrt sehen Websites mit starken Fokusindikatoren verbesserte Task-Abschlussraten. Eine Studie von Nomensa über Barrierefreiheits-ROI zeigte, dass zugängliche Websites (einschließlich gutes Fokus-Management) 23% höhere Task-Abschlussraten als nicht zugängliche Konkurrenten hatten.

Bessere Fokusindikatoren werden dir nicht nur helfen, Audits zu bestehen. Sie helfen Nutzern, mit dem Einkaufen fertig zu werden.

Schnelle Umsetzungs-Checkliste

Hier ist ein 20-Minuten-Aktionsplan zur Verbesserung deiner Fokusindikatoren:

Sofort (5 Minuten):

1. Füge dieses Basis-CSS zu deinem Theme hinzu:

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 3px solid #0066CC;
     outline-offset: 2px;
   }
   

2. Teste auf deiner Homepage, Navigationsmenü und Checkout. Siehst du den Fokusindikator überall?

Diese Woche (1 Stunde):

1. Wähle eine markengerechte Fokusfarbe, die Kontrastanforderungen erfüllt. Verwende WebAIMs Contrast Checker, um 3:1 gegen deine Haupt-Hintergrundfarben zu überprüfen.

2. Personalisiere Fokus-Styles für verschiedene Bereiche (helle Hintergründe vs. dunkle Hintergründe).

3. Teste dein Mega-Menü (falls du eins hast). Stelle sicher, dass fokussierte Untermenü-Elemente deutlich sichtbar sind.

Diesen Monat (2–3 Stunden):

1. Füge spezifische Fokus-Styles für interaktive Komponenten hinzu:
   • Produktkarten
   • Add-to-Cart-Buttons
   • Filter-Checkboxen
   • Such-Autocomplete-Vorschläge
   • Modal Close-Buttons

2. Führe einen automatisierten Audit mit axe DevTools aus und behebe alle gekennzeichneten Fokus-Probleme.

3. Lasse ein Team-Mitglied (oder Kunden) deine Website nur mit der Tastatur navigieren und berichte, wo Fokus schwer zu sehen ist.

Fokusindikatoren sind eines der einfachsten Barrierefreiheits-Gewinne. Die technische Arbeit ist minimal – ein paar Dutzend CSS-Zeilen – aber die Auswirkung ist riesig. Jeder Tastaturnutzer, der auf deiner Website landet, wird davon profitieren.

This article is part of the larger guide on Keyboard navigation: why it matters beyond accessibility.