Focus Outlines

Focus Outlines sind sichtbare Indikatoren, die zeigen, welches interaktive Element aktuell fokussiert ist. Sie sind essentiell für die Tastaturnavigation.

Was sind Focus Outlines?

Focus Outlines sind visuelle Markierungen um fokussierte Elemente (Links, Buttons, Formularfelder). Sie erscheinen, wenn ein Element mit der Tastatur (Tab-Taste) fokussiert wird und helfen Nutzern zu erkennen, wo sie sich gerade befinden.

Standardwerte bei Neuinstallation

Hauptschalter an. Die allgemeine Outline gilt standardmäßig nur für button, .btn (nicht für alle Links). Alternative Outline, Formular-Focus Outline und „Auf :focus anwenden“ sind aus. Bildlink-Korrektur ist an.

Sinn und Einsatzmöglichkeiten

• Für Tastaturnutzer: Unverzichtbar für die Navigation ohne Maus
• Für Screenreader-Nutzer: Visuelle Bestätigung des aktuellen Fokus
• Für alle Besucher: Bessere Orientierung, besonders bei komplexen Formularen
• WCAG-Konformität: Erfüllt WCAG 2.4.7 (Focus Visible), 1.4.11 (Non-text Contrast) und 2.4.11 (Focus Not Obscured)

Relevante WCAG-Kriterien:

• 1.4.11 Nicht-Text-Kontrast: Sorgt dafür, dass der Fokus-Indikator einen ausreichenden Kontrast hat.
• 2.4.7 Fokus sichtbar: Stellt sicher, dass der Tastaturfokus jederzeit klar erkennbar ist.
• 2.4.11 Fokus nicht verdeckt: Verbessert die Sichtbarkeit des Fokus, auch wenn er teilweise verdeckt wird.

Drei Arten von Focus Outlines

Das Plugin bietet drei separate Focus Outline-Konfigurationen:

1. Allgemeine Focus Outline: Standard-Styling für die meisten fokussierbaren Elemente
2. Alternative Focus Outline: Spezielles Styling für bestimmte Bereiche (z.B. Footer)
3. Formular-Focus Outline: Spezielles Styling für Formularfelder (Input, Textarea, Select)

Geführte Einstellungsoberfläche

Die Profilauswahl nutzt die volle Inhaltsbreite. So kannst du Standard, Alternative und Formularfelder gut vergleichen, ohne drei Einstellungsbereiche nebeneinander bedienen zu müssen. Eine Live-Vorschau bleibt sichtbar: auf dem Desktop fixiert rechts neben den Einstellungen, auf kleineren Bildschirmen vor den Bedienelementen in einer logischen Lese- und Fokusreihenfolge.

Die allgemeine Hilfe im Seitenkopf erklärt die Wahl der drei Profile, den Unterschied zwischen :focus-visible und :focus, eine kontraststabile Gestaltung sowie einen vollständigen Tastatur-Testablauf einschließlich Zoom, schmalen Viewports und fixierten Seitenelementen.

Beim Wechsel zwischen Standard-Fokus und alternativem Fokus bleiben das ausgewählte Vorschau-Element sowie der helle oder dunkle Hintergrund unverändert. Das Profil für Formularfelder wechselt gezielt auf das Eingabefeld und blendet die dort nicht relevanten Beispiele für Button und Link aus. Beim Verlassen dieses Profils stellt die Vorschau die zuvor gewählte Elementart wieder her.

Methodenabhängige Optionen werden nur angezeigt, wenn sie relevant sind. CSS-Selektoren sowie Sonderfälle für Bildlinks oder klickbare Karten bleiben in aufklappbaren Bereichen erreichbar. Dadurch bleibt die tägliche Konfiguration kompakt, ohne erweiterte Optionen zu entfernen.

Am Anfang des geöffneten Bereichs Sonderfälle führt ein kontextbezogener Hilfeknopf zu einer ausführlichen Erklärung. Die Hilfe erläutert die Bildlink-Korrektur, Karten mit unsichtbaren Overlay-Links, die Auswahl und Begrenzung der drei benötigten Selektoren, das Verhalten bei Tastatur- und Mausfokus sowie konkrete Prüfschritte. Auf kleinen Bildschirmen öffnet sie als wischbares Bottom Sheet, auf größeren als gemeinsamer Hilfedialog.

Beim Profil „Alternative“ kann die Box-Shadow-Methode einen zweifarbigen Fokusindikator mit konfigurierbarem innerem Puffer verwenden. So bleibt der Indikator sichtbar, wenn ein Element über helle und dunkle Hintergründe reicht.

Warum Alternative Outlines?

Alternative Outlines sind nützlich, wenn bestimmte Bereiche deiner Website einen anderen Hintergrund haben, auf dem die Standard-Focus Outline nicht gut sichtbar ist.

Typische Anwendungsfälle:

• Dunkler Footer: Wenn dein Footer einen dunklen Hintergrund hat, benötigst du eine helle Focus Outline (z.B. weiß statt schwarz)
• Farbige Bereiche: In Bereichen mit farbigem Hintergrund kann die Standard-Outline verloren gehen
• Design-Konsistenz: Für ein konsistentes Design in verschiedenen Bereichen

Wie funktioniert es?

• Du definierst CSS-Selektoren für Elemente, die die alternative Outline erhalten sollen (z.B. .footer a, .footer button)
• Diese Elemente erhalten automatisch die alternative Outline statt der Standard-Outline
• Die Elemente werden automatisch von der Standard-Outline ausgeschlossen

Warum Formular Outlines?

Formularfelder haben besondere Anforderungen:

• Permanenter Focus: Formularfelder zeigen Focus oft dauerhaft an (nicht nur bei Tastaturnavigation)
• Andere Gestaltung: Formularfelder benötigen oft ein anderes Styling als Links oder Buttons
• Bessere Sichtbarkeit: Ein stärkerer, kontrastreicherer Focus-Indikator hilft bei der Formularausfüllung
• WCAG-Konformität: Formularfelder müssen besonders klar fokussierbar sein

Wie funktioniert es?

• Du definierst CSS-Selektoren für Formularfelder (Standard: input, select, textarea)
• Diese Felder erhalten die spezielle Formular-Focus Outline
• Du kannst bestimmte Felder ausschließen (z.B. Submit-Buttons, die die Standard-Outline erhalten sollen)

Konfigurationsmöglichkeiten

Allgemeine Focus Outline:

• CSS-Methode: Outline, Border oder Box-Shadow
• Linienstil: Solid, Dashed oder Dotted
• Linienstärke: 1-10 Pixel
• Farbe: RGBA-Farbe (mit Transparenz möglich)
• Border-Radius: Abrundung der Ecken (0-20px)
• Innerer Abstand: Abstand zwischen Element und Outline (nur bei Outline-Methode)
• Inset Outline: Outline innerhalb des Elements (nur bei Box-Shadow-Methode)
• Auf :focus anwenden: Zeigt Outline auch bei Mausklick (Standard: nur bei Tastatur)
• CSS-Übergänge deaktivieren: Verhindert unerwünschte Animationen
• Bildlink-Korrektur: Automatische Korrektur für Bild-Links (verhindert Layout-Sprünge)
• Zusätzliche Selektoren: CSS-Selektoren für Elemente, die diese Outline erhalten sollen
• Ausgeschlossene Selektoren: CSS-Selektoren für Elemente, die keine Outline erhalten sollen

Alternative Focus Outline:

• Alle Styling-Optionen wie bei der allgemeinen Outline
• Selektoren für alternative Outline: CSS-Selektoren für Elemente, die die alternative Outline erhalten sollen (z.B. .footer a, .footer button)
• Diese Selektoren werden automatisch von der allgemeinen Outline ausgeschlossen

Formular-Focus Outline:

• Alle Styling-Optionen wie bei der allgemeinen Outline
• Formularfeld-Selektoren: CSS-Selektoren für Formularfelder (Standard: input, select, textarea)
• Ausgeschlossene Formularfeld-Selektoren: CSS-Selektoren für Felder, die die Standard-Outline erhalten sollen (z.B. input[type=“submit“])

Anwendungsbeispiele

Beispiel 1: Standard-Konfiguration

Aktiviere die allgemeine Focus Outline mit schwarzer, gestrichelter Outline (2px). Verwende die Outline-Methode mit einem inneren Abstand von 2px. Aktiviere die Bildlink-Korrektur.

Beispiel 2: Mit Alternative Outline für Footer

Allgemeine Outline: schwarz, 2px, gestrichelt. Alternative Outline aktivieren für .footer a, .footer button mit weißer, 3px, durchgezogener Outline. Der Footer hat einen dunklen Hintergrund, daher benötigt er eine helle Outline.

Beispiel 3: Mit Formular-Focus Outline

Allgemeine Outline: für Links und Buttons. Formular-Focus Outline aktivieren für input, select, textarea mit blauer, 3px, durchgezogener Outline. Submit-Buttons ausschließen, damit sie die Standard-Outline erhalten.

Beispiel 4: Komplexe Konfiguration

Allgemeine Outline: schwarz, 2px. Alternative Outline für .footer a, .footer button, .dark-section a mit weißer Outline. Formular-Focus Outline für alle Formularfelder mit blauer, 3px Outline. Submit-Buttons und Buttons in der Navigation erhalten die Standard-Outline.

Tipps

• Verwende kontrastreiche Farben für bessere Sichtbarkeit (WCAG 1.4.11)
• Teste die Focus Outlines auf verschiedenen Hintergründen
• Die Alternative Outline sollte einen deutlich anderen Kontrast haben als die Standard-Outline
• Für Formularfelder: Verwende eine stärkere Outline (3px statt 2px) für bessere Sichtbarkeit
• Die Box-Shadow-Methode bietet mehr Gestaltungsmöglichkeiten, ist aber komplexer
• Die Outline-Methode ist am einfachsten, funktioniert aber nicht bei allen Elementen perfekt
• Die Border-Methode ist zuverlässig, kann aber Layout-Änderungen verursachen
• Teste die Focus Outlines mit der Tastatur (Tab-Taste) in verschiedenen Browsern
• Die Bildlink-Korrektur sollte aktiviert bleiben, es sei denn, sie verursacht Konflikte
• Verwende aussagekräftige Selektoren für die Alternative Outline (z.B. .footer a statt nur a)

Häufige Probleme

Problem: Outline ist unsichtbar

Lösung: Prüfe den Kontrast zwischen Outline-Farbe und Hintergrund. Verwende die Alternative Outline für Bereiche mit anderem Hintergrund. Aktiviere die Bildlink-Korrektur.

Problem: Outline wird von Theme-Styles überschrieben

Lösung: Aktiviere „Border-Radius !important“ oder verwende die Box-Shadow-Methode, die weniger überschrieben wird.

Problem: Layout-Sprünge bei Focus

Lösung: Aktiviere die Bildlink-Korrektur. Verwende die Outline-Methode statt Border, da Outline das Layout nicht beeinflusst.

Technische Details

• Die Focus Outlines werden mit CSS implementiert und funktionieren ohne JavaScript
• Standardmäßig wird :focus-visible verwendet (nur bei Tastaturnavigation)
• Mit „Auf :focus anwenden“ wird auch :focus verwendet (auch bei Mausklick)
• Die Alternative Outline hat Priorität über die Standard-Outline
• Die Formular-Focus Outline hat Priorität über die Standard-Outline
• Elemente können nur eine Outline-Art erhalten (Standard, Alternative oder Formular)

Verfügbar für: Alle Pläne Free

Selektor-Tags und automatische Ausschlüsse

Bestätige jeden CSS-Selektor mit Enter oder Komma. Gespeicherte Einträge erscheinen als entfernbare Tags; Du kannst auch eine kommagetrennte Liste einfügen. Noch nicht bestätigter Text wird beim Verlassen des Feldes oder beim Speichern übernommen.

Im Standard-Profil zeigt das Feld für ausgeschlossene Selektoren zusätzlich automatische Tags nach ihrer Herkunft aus dem alternativen Fokus oder den Formularfeldern. Aktive Profile aktualisieren diese Ausschlüsse sofort und zeigen eine Rückmeldung im bearbeiteten Profil. Ändere automatische Tags im zugehörigen Profil: Wenn Du dort einen Selektor entfernst oder das Profil deaktivierst, entfällt sein automatischer Ausschluss. Manuelle Ausschlüsse bleiben erhalten. Formular-Ausnahmen behalten den Standard-Fokus, sofern Du sie dort nicht ebenfalls ausdrücklich ausschließt. Speichere die Einstellungen, um die Änderungen auf Deiner Website anzuwenden.