Sichtbarer Fokus

Das Modul macht einen starken, sichtbaren Fokus-Ring. Dieser Ring ist auf allen Elementen da, die man auswählen kann. Der Fokus-Ring hat einen sehr starken Kontrast.

Was es macht

Funktion in einem Satz — und in 3 Sätzen

Viele neue CSS-Einstellungen entfernen den Standard-Fokus vom Browser. Diese Einstellung heißt "outline: none". Wenn das Design keinen Ersatz hat, wissen Menschen mit Tastatur nicht, wo sie sind. Das ist ein großes Problem. Bei Prüfungen für Barrierefreiheit fällt man dann durch. Das Modul zeigt einen 3 Pixel breiten Rand um alle interaktiven Elemente. Der Rand hat einen starken Kontrast. Das gilt für jedes Design.

So implementiert das Plugin es

Technische Maßnahmen

3 px Outline + 2 px Offset — visuell deutlich, ohne Layout zu sprengen.
Kontrast-Berechnung pro Element: wählt automatisch dunkle Outline auf hellem, helle Outline auf dunklem Hintergrund.
`:focus-visible` statt `:focus` — Maus-Klicks zeigen keinen Ring (modernes Verhalten), Tastatur-Fokus immer.
Custom-Elemente: auch `tabindex="0"` auf Divs / Spans bekommen den Ring.
Border-Radius-Anpassung: Outline folgt der gerundeten Form (kein scharfkantiger Rahmen um runde Buttons).

Im Plugin-Backend

Diese Einstellungen findest du im Modul-Tab

Ring-Stärke (1–5 px, Default 3)
Ring-Farbe: Auto / fixe HEX-Farbe / CSS-Variable
Offset (0–6 px, Default 2)
Animation beim Erscheinen: aus / weich (respektiert `prefers-reduced-motion`)
Ausnahmen-Selektoren (CSS): Elemente ohne Override-Ring

So findest du das Modul: Gehe im Admin-Menü zu Barrierefreiheit. Dann zu Module und klicke auf Sichtbarer Fokus.

Wann brauchst du das Modul?

Anwendungsfall

Du brauchst dieses Modul auf jeder Seite. WCAG 2.4.11 ist Stufe AAA. Aber schon 2.4.7 verlangt, dass der Fokus sichtbar ist. Das ist wichtig bei Designs mit vielen CSS-Änderungen. Oder wenn du eigene Buttons machst. Im ersten Gespräch von 15 Minuten sprechen wir darüber. Wir klären, ob das Modul für dein Design wichtig ist. Und wie du es einrichtest.

Verwandte Module

Das passt thematisch zusammen

Tastatur-Navigation
WCAG 2.1.1
Stellt sicher, dass jedes interaktive Element auch ohne Maus erreichbar ist — Tab, Enter, Pfeile, Esc.
Tabindex Manager
WCAG 2.4.3
Repariert die Tab-Reihenfolge, eliminiert positive `tabindex`-Werte und springt fehlerhafte Sprünge.
Skip-Links & Landmarks
WCAG 2.4.1
Setzt semantische Landmark-Rollen und sichtbare Sprung-Links für Tastatur-Nutzer:innen und Screenreader.

Modul für deine Seite aktivieren?

15-Min-Erstgespräch
Alle Module ansehen