WCAG 2.1 - 2.4.7
Focus Visible
Jede über die Tastatur bedienbare Benutzeroberfläche hat einen Betriebsmodus, in dem der Tastaturfokusindikator sichtbar ist.
Inhalt
Was Bedeutet das Success Criterium 2.4.7 - Focus Visible?Warum ist es so wichtig, das Success Criterium 2.4.7 - Focus Visible zu beachten?Was hat das Success Criterium 2.4.7 - Focus Visible mit dem BFSG zu tun?Lösungen für 2.4.7 - Focus Visible anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.4.7 - Focus Visible?Was Bedeutet das Success Criterium 2.4.7 - Focus Visible?
Focus Visible bedeutet, dass alle interaktiven Elemente – z.B. Links, Buttons oder Formularfelder – einen sichtbaren Fokusindikator besitzen m cssen, sobald sie per Tastatur (meist mit der Tab-Taste) oder anderen Eingabemethoden angesteuert werden. Das hei3t: Es muss f7r den Nutzenden immer klar sichtbar sein, wo sich der Tastaturfokus auf der Webseite aktuell befindet. Meistens geschieht dies durch eine gut sichtbare Umrahmung (Outline) oder Hervorhebung des aktiven Elements.
Woran erkennt man einen guten Fokusindikator?
- Er ist deutlich vom restlichen Design unterscheidbar (z.B. eine leuchtende Umrandung oder Farbcngerung)
- Er ist ausreichend kontrastreich zum Hintergrund
- Er geht beim Wechsel zum ne4chsten Element automatisch mit
- Fokusindikatoren sollten nicht per CSS entfernt sein (
outline: none) und nicht so subtil sein, dass sie kaum gesehen werden
Typische Fehler
- Der Fokusindikator ist nicht vorhanden, weil er per CSS entfernt wurde
- Der Indikator ist zu schwach, z.B. zu dcnn oder mit zu wenig Kontrast
- Interaktive Elemente bekommen keinen eigenen Fokusindikator
Warum ist es so wichtig, das Success Criterium 2.4.7 - Focus Visible zu beachten?
Ein sichtbareres Fokushervorhebung ermcglich Menschen, die die Tastatur (statt der Maus) oder Screenreader nutzen, sich auf einer Website sicher zu orientieren und Eingaben vorzunehmen. Gerade f7r Menschen mit motorischen oder sehbezogenen Einschr68kungen ist das unverzichtbar. Ohne sichtbaren Tastaturfokus besteht gro7e Verwechslungs- und Orientierungsgefahr.
Was hat das Success Criterium 2.4.7 - Focus Visible mit dem BFSG zu tun?
Das Barrierefreiheitsst51rkungsgesetz verlangt die Einhaltung der europeischen Normen zur Barrierefreiheit, die die WCAG zugrunde legen. SC 2.4.7 ist dabei verpflichtend. Ohne sichtbaren Fokus k46nnen zentrale Websitefunktionen f7cr viele Nutzer nicht sicher bedient werden. Wird kein sichtbarer Fokus angeboten, ist eine Webseite also nicht barrierefrei im Sinne des BFSG und haftet im Zweifelsfall f4r diesen Mangel.
Lösungen für 2.4.7 - Focus Visible anhand von Codebeispielen
Falscher Code
<style>
button:focus {
outline: none;
}
</style>
<button>Absenden</button>Korrekter Code
<style>
button:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
</style>
<button>Absenden</button>Der schlechte Code entfernt den sichtbaren Fokus komplett (`outline: none;`). Das f3hrt dazu, dass Tastaturnutzer nicht erkennen k46nnen, auf welchem Element der Fokus liegt. Im guten Beispiel wird ein klar sichtbarer, farbiger Rahmen als Fokusindikator gesetzt.
Falscher Code
<style>
button:focus {
outline: 1px dotted #aaa;
}
</style>
<button>Absenden</button>Korrekter Code
<style>
button:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
</style>
<button>Absenden</button>Ein sehr d 9nner, grauer Rahmen kann leicht 5bbersehen werden und ist oft nicht kontrastreich genug. Der gute Code setzt einen breiteren, farblich auff52lligen Fokusindikator.
Falscher Code
<!-- Beispiel ohne Fokus-Markierung auf eigenen Elementen -->
<a href="#">Link 1</a> <a href="#">Link 2</a>Korrekter Code
<!-- Nutzung der nat7crlichen Fokushervorhebung. Kein outline entfernen! -->
<a href="#">Link 1</a> <a href="#">Link 2</a>Links haben standardm289ig eine Fokus-Markierung (in den meisten Browsern einen Outline). Dieser sollte nicht entfert werden. Ver28ndert man das Aussehen, sollte das neue Styling mindestens genauso deutlich sein.
Wie löse ich Verstöße gegen das Success Criterium 2.4.7 - Focus Visible?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.