2.4.7 Fokus sichtbar

1. Was ist das Ziel dieses Kriteriums?

Hast du schon mal versucht, eine Website nur mit der Tastatur zu bedienen? Du drückst Tab, Tab, Tab – und plötzlich weißt du nicht mehr, wo du eigentlich bist. Der Fokus ist irgendwo hingesprungen, aber du siehst nicht wo.

Menschen, die auf die Tastatur angewiesen sind – sei es aufgrund von motorischen Einschränkungen, Sehbehinderungen oder einfach aus Bequemlichkeit – stehen ohne sichtbare Fokusmarkierung buchstäblich im Dunkeln.

Das Ziel von Erfolgskriterium 2.4.7 der WCAG ist daher simpel: Jedes Element, das Tastaturfokus erhalten kann, muss auch visuell zeigen, dass es den Fokus hat. Kurz gesagt: Der Nutzer soll immer sehen können, wo er sich gerade befindet.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret fordert das Kriterium: Jede tastatursteuerbare Benutzeroberfläche muss mindestens einen Betriebsmodus haben, in dem der Tastaturfokus-Indikator sichtbar ist.

Was bedeutet das in der Praxis?

• Wenn ein Element Tastaturfokus erhält, muss eine visuelle Markierung erscheinen
• Die Fokusmarkierung muss so lange sichtbar bleiben, wie das Element den Fokus hat
• Es darf keine zeitliche Begrenzung für die Anzeige geben
• Die Markierung muss deutlich erkennbar sein

Wichtige Details:

• Browser zeigen oft automatische Fokusmarkierungen (meist blaue Umrandungen)
• Diese dürfen nicht einfach entfernt werden, ohne Ersatz zu bieten
• Manche Browser zeigen Fokus nur bei Tastaturnutzung – das ist erlaubt
• Verschiedene Arten der Fokusmarkierung sind möglich: Umrandungen, Schatten, Farbänderungen

Ausnahmen:

• Wenn der Browser bereits eine deutliche Fokusmarkierung bereitstellt, die ausreichend sichtbar ist
• Wenn ein alternatives, eigenes Fokus-Design implementiert wird, das mindestens genauso gut sichtbar ist

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du navigierst durch ein Online-Formular, aber siehst nicht, welches Feld gerade aktiv ist. Oder du versuchst durch ein Menü zu tabben, aber erkennst nicht, welcher Menüpunkt gerade ausgewählt ist.

Sichtbare Fokusmarkierungen schaffen Barrierefreiheit, weil sie:

• Menschen mit Sehbehinderungen helfen, ihre Position auf der Seite zu verfolgen
• Nutzer mit motorischen Einschränkungen bei der präzisen Navigation unterstützen
• Menschen mit Aufmerksamkeitsdefiziten oder Gedächtnisproblemen dabei helfen, nicht die Orientierung zu verlieren
• Tastaturnutzern generell eine bessere Kontrolle über ihre Navigation geben
• Allen Nutzern in Situationen helfen, wo die Maus nicht verfügbar oder unpraktisch ist

Und nicht zuletzt: Eine klare Fokusmarkierung verbessert die Nutzererfahrung für alle – auch für Menschen ohne Einschränkungen, die gerade die Tastatur verwenden.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Browser bringen bereits Fokusmarkierungen mit. Die schlechte: Viele Designer entfernen sie, weil sie "hässlich" sind. Hier ein paar bewährte Wege, es richtig zu machen:

Grundregeln für gute Fokusmarkierungen:

• Nutze die Browser-Standards als Basis – sie sind bereits getestet und funktionieren
• Wenn du eigene Styles entwickelst, achte auf ausreichend Kontrast zum Hintergrund
• Mache die Markierung deutlich sichtbar – zu subtil hilft niemandem
• Sorge für Konsistenz: Alle fokussierbaren Elemente sollten ähnlich markiert werden
• Verwende verschiedene visuelle Hinweise: Umrandung, Schatten, Farbänderung

Technische Umsetzung:

/* Schlecht: Fokus komplett entfernen */

button:focus { outline: none; }


/* Besser: Eigenen Fokus-Style definieren */

button:focus {
  outline: 2px solid #007acc;
    outline-offset: 2px;

}


/* Noch besser: Mit zusätzlichen visuellen Hinweisen */

button:focus {
  outline: 2px solid #007acc;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.3);
    background-color: #f0f8ff;

}

Praktische Tipps:

• Teste deine Website regelmäßig nur mit der Tastatur
• Achte auf ausreichend Farbkontrast bei der Fokusmarkierung
• Verwende :focus-visible für moderne Browser, um Fokus nur bei Tastaturnutzung zu zeigen
• Prüfe verschiedene Hintergründe – deine Fokusmarkierung muss überall sichtbar sein

Tools und Hilfsmittel:

• Browser-Entwicklertools zur Überprüfung der Fokusreihenfolge
• Kontrast-Checker für die Fokusfarben
• Accessibility-Extensions für automatische Tests

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Barrierefreiheit bei der Fokusmarkierung ist nicht nur Pflicht – sie bringt echte Geschäftsvorteile und zeigt, dass du alle Nutzer ernst nimmst.

1. Zielgruppe erweitern Jeder zwanzigste Deutsche hat eine Behinderung – das sind über 4 Millionen potentielle Kunden. Dazu kommen Menschen mit temporären Einschränkungen (gebrochener Arm), situationsbedingten Herausforderungen (laute Umgebung) oder einfach persönlichen Vorlieben für Tastaturnavigation. Mit sichtbarem Fokus machst du deine Website für alle nutzbar.

2. Rechtssicherheit und Compliance verbessern Das Behindertengleichstellungsgesetz und die EU-Accessibility-Direktive fordern digitale Barrierefreiheit. Sichtbare Fokusmarkierungen sind ein grundlegender Baustein. Wer hier versagt, riskiert nicht nur rechtliche Probleme, sondern auch negative Publicity bei Accessibility-Tests.

3. Benutzerfreundlichkeit steigern Klare Fokusmarkierungen verbessern die Navigation für alle Nutzer – nicht nur für Menschen mit Behinderungen. Poweruser, die gerne Tastaturkürzel nutzen, ältere Menschen, die präzise Navigation bevorzugen, und mobile Nutzer profitieren alle von deutlichen visuellen Hinweisen.

Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.

6. Das Erfolgskriterium im Wortlaut der W3

Success Criterion 2.4.7 Focus Visible (Level AA)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Link zum konkreten Erfolgskriterium

← Zurück zur WCAG-Übersicht