Mit der Tab-Taste kann man sich auf der Seite bewegen. Dabei sieht man immer, wo man ist. Die Markierung verschwindet nicht.
Der Fokus-Anzeiger zeigt, auf welchem Teil der Seite man mit der Tastatur ist. Am Anfang ist das oft eine dünne, blaue Linie. Manche Designs nehmen diese Linie weg, weil sie sie nicht schön finden. Dann kann man die Seite nicht mehr mit der Tastatur benutzen.
Es gibt eine Regel, die klare Markierungen verlangt. Die Markierung muss mindestens 2 Mal so dick sein wie ein Punkt auf dem Bildschirm. Es muss ein starker Kontrast zum Hintergrund da sein. Ohne diese Markierung weiß man nicht, wohin man springt. Auch wichtig: Der Mauszeiger braucht keine Markierung, die Tastatur schon.
Wir bieten ein erstes Gespräch an. Wir finden heraus, ob das Thema wichtig für Ihre Seite ist. Weitere Infos: Übersicht über Barrierefreiheit, unsere Leistungen, Förderung, Antworten auf häufige Fragen.
Sichtbarer Fokus-Indikator
Wer per Tab navigiert, weiß immer wo. Kein verschwindender Outline.
Was bedeutet „Sichtbarer Fokus-Indikator"?
Der Fokus-Indikator ist die sichtbare Markierung, die zeigt, welches Element gerade per Tastatur angesteuert ist. Browser-Default ist meist ein dünner blauer Outline. Viele Themes entfernen diesen Outline („sieht hässlich aus") — und brechen damit die Tastatur-Bedienbarkeit für jeden, der nicht mit der Maus arbeitet.
Pflicht und Nutzen — WCAG 2.4.11.
WCAG 2.4.11 (Focus Appearance) verlangt einen Fokus-Indikator mit klarem visuellem Unterschied — mindestens 2 CSS-Pixel dick, Kontrast 3:1 zum Umgebenden. Ohne sichtbaren Fokus ist Tastatur-Navigation faktisch unmöglich (man weiß nicht, wo Enter einen hin schickt). Plus Pflicht: :focus-visible trennt Maus-Klick (kein Outline nötig) von Tab-Fokus (Outline Pflicht) — saubere UX.
Wie wir es konkret lösen.
- Globaler Fokus-Stil: 3 px solid Brand-Farbe + 3 px Offset, border-radius 6 px — gut sichtbar, AAA-Kontrast.
:focus-visiblestatt:focus— Maus-Klicks erhalten keinen Outline, Tab-Fokus schon.- Niemals globales
outline: noneohne Ersatz. - Custom-Komponenten (Karussells, Custom-Dropdowns) bekommen explizit eigene Focus-States.
- Verifikation: Tastatur-Walkthrough — jedes interaktive Element muss bei Fokus eindeutig erkennbar sein.
Verwandte Bausteine unserer Modulsuite
-
Barrierefreie Formulare
WCAG 3.3.1Klare Labels, programmatische Fehlerführung, Validierung — keine Browser-Bubbles, kein „Bitte ausfüllen".
-
AAA-Kontraste, geprüft pro Komponente
WCAG 1.4.6≥ 7:1 für Text, ≥ 4,5:1 für große Schrift — geprüft pro Komponente, nicht pro Page-Stichprobe.
-
Skip-Links & semantische Landmarks
WCAG 2.4.1Tastatur springt direkt zum Hauptinhalt — ohne durch Navigation und Header zu hangeln.
-
Leichte Sprache (KI-gestützt)
WCAG 3.1.5Inhalte auf Knopfdruck vereinfacht — für Menschen mit Lese-Einschränkungen, Sprachlerner und Eilige.
Brauchen Sie genau dieses Modul?
15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.
Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs