Zum Inhalt springen

KI-Agentur Osnabrück Automatisierung & Workflows BFSG-konformes Webdesign Westerkappeln · Region 100 km um Osnabrück · deutschlandweit

Mechanik-Modul · WCAG 2.4.11 · Stufe AAA

Sichtbarer Fokus

Sorgt für einen kräftigen, immer sichtbaren Fokus-Ring auf allen fokussierbaren Elementen — mit AAA-Kontrast.

Modul aktivieren lassen Alle Module
Was es macht

Funktion in einem Satz — und in drei Sätzen.

Viele moderne CSS-Resets entfernen den Browser-Standard-Fokus („outline: none"). Wenn das Theme keinen Ersatz liefert, sehen Tastatur-Nutzer:innen nicht, wo sie sich gerade befinden — ein K.O.-Kriterium bei WCAG-Audits.

Das Modul setzt einen 3 px starken Outline-Ring mit AAA-Kontrast (mindestens 7:1 gegen den Hintergrund) auf allen interaktiven Elementen, unabhängig vom Theme.

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

Pfad im Admin: WP-Admin → Barrierefreiheit → Module → Sichtbarer Fokus

Wann brauchst du das Modul?

Anwendungsfall.

Pflicht-Modul für jede Seite. WCAG 2.4.11 ist auf Stufe AAA, aber bereits 2.4.7 (Fokus sichtbar) auf Stufe AA verlangt das.

Besonders kritisch bei Themes mit aggressiven CSS-Resets oder bei selbstgebauten Buttons via `

`.

Verwandte Module

Das passt thematisch zusammen.

WCAG 2.1.1

Tastatur-Navigation

Stellt sicher, dass jedes interaktive Element auch ohne Maus erreichbar ist — Tab, Enter, Pfeile, Esc.

WCAG 2.4.3

Tabindex Manager

Repariert die Tab-Reihenfolge, eliminiert positive `tabindex`-Werte und springt fehlerhafte Sprünge.

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?

Im 15-Minuten-Erstgespräch klären wir, ob das Modul für deinen Theme- und Inhalts-Typ relevant ist — und wie die Einrichtung aussieht.

Erstgespräch buchen