Zum Inhalt springenZum Inhalt springen

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.

Was es macht

Funktion in einem Satz — und in 3 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

  • 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.

  • 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.

15-Min-Erstgespräch
Alle Module ansehen

Leichte Sprache