coastdigitalgroup/coastai-skills

Focus Indicator Design System

Zweck

Das Focus Indicator Design System bietet eine systematische Methodik zum Entwerfen, Spezifizieren und Prüfen von Tastatur-Fokusindikatoren für alle interaktiven Elemente (Buttons, Links, Formulareingaben, benutzerdefinierte Schalter und komplexe Widgets).

Fokusindikatoren sind der primäre visuelle Wegweiser für Tastaturnavigierer, Screenreader-Nutzer und Personen, die alternative Eingabegeräte verwenden. Wenn Designer den standardmäßigen Browser-Fokusring ausblenden, weil er „hässlich aussieht“, oder durch eine kontrastarme Überschreibung ersetzen, schaffen sie sofort eine katastrophale Barriere für die Barrierefreiheit. Dieses System stellt sicher, dass Fokusindikatoren markenkonform, kontrastreich, robust positioniert und konform mit den WCAG 2.1- und 2.2-Standards sind, ohne die visuelle Ästhetik zu beeinträchtigen.

Anwendungsfälle

• Erstellung von Designsystemen: Aufbau globaler, auf Tokens basierender Fokus-Zustände innerhalb eines Marken-UI-Kits.
• Spezifikation von Komponentendesign: Definieren benutzerdefinierter Fokusringe für komplexe Elemente (z. B. benutzerdefinierte Checkboxen, Bereichsschieberegler oder Registerkartengruppen).
• Überprüfung der Barrierefreiheit (Remediation Audits): Identifizieren und Beheben unsichtbarer oder kontrastarmer Fokusumrisse auf einer bestehenden Website.
• Anpassung an Themes und Hintergründe: Standardisieren von Fokusindikatoren für helle, dunkle und markenfarbene Hintergründe.
• Plattformübergreifende Eingabeoptimierung: Konfigurieren von :focus-visible-Verhalten, um sicherzustellen, dass Mausbenutzer keine störenden Fokusringe sehen, während Tastaturnavigierer gut sichtbare Indikatoren erhalten.

Wann NICHT verwenden

• Statischer Inhalt: Entwerfen Sie keine Fokusindikatoren für nicht interaktive Elemente (z. B. einfache Absätze, Bilder, Überschriften oder Informationskarten ohne Links).
• Native, unveränderte Steuerelemente: Wenn ein Projekt sich ausschließlich auf die standardmäßigen Browsersteuerelemente ohne benutzerdefiniertes Styling oder Markenüberschreibungen verlässt und das native Fokusverhalten vollständig unberührt ist.
• Alternative Navigationsmodalitäten: Bei sprachgesteuerten Smart Displays oder reinen Touch-basierten nativen mobilen Anwendungen, in denen Tastatur-Fokusringe nicht Teil der standardmäßigen Barrierefreiheitsarchitektur der Plattform sind.

Eingaben

1. Markenpalette und Hintergrund-Tokens: Kernfarben, Hintergrundfarben (hell, dunkel und mit Markenfarbton) sowie Containerrahmen.
2. Bestandsaufnahme interaktiver Elemente: Eine Liste aller interaktiven UI-Komponenten, die Fokus-Zustände erfordern (Buttons, Links, Textfelder, Optionsfelder, benutzerdefinierte Overlays).
3. Eckenradius-System: Token-Werte für die Abrundung von Komponenten (z. B. --radius-s, --radius-m), um sicherzustellen, dass Fokusringe der Elementform entsprechen.
4. Angestrebte WCAG-Stufe: Standardmäßige AA-Mindestkonformität (WCAG 2.1/2.2) oder AAA-Ziel.

Ausgaben

1. Globale Fokus-Tokens: Standardisierte Design-Tokens, die Fokusring-Farbe, -Dicke, -Umrissstil und -Abstand definieren.
2. Komponentenspezifische Fokus-Spezifikationen: Räumliche Layout-Regeln für innere Fokusringe, äußere Fokusringe und komplexe verschachtelte Umrisse.
3. Hochkontraststil-Regeln (Forced Colors): CSS-Spezifikationen, die die Kompatibilität mit dem Windows-Forced-Colors-Modus gewährleisten.
4. Fokus-sichtbare Integrationslogik: Spezifikationen, die Tastaturnavigationshinweise von Mausklickreaktionen trennen.

Arbeitsablauf

1. Katalogisieren der Komponentenkontexte

Prüfen Sie interaktive Komponenten und gruppieren Sie sie nach Container-Hintergrund, um die Kontrastanforderungen für den Fokus zu bestimmen:

• Helle Hintergründe: Erfordern einen dunklen Fokusring.
• Dunkle Hintergründe: Erfordern einen hellen Fokusring.
• Markenhintergründe (z. B. Leuchtendes Blau): Können einen neutral-weißen oder sekundären kontrastreichen Ring erfordern, da standardmäßige markenfarbene Umrisse im Hintergrund verschwinden.

2. Definieren des Größen- und Platzierungsmodells

Wählen Sie die geometrische Beziehung zwischen dem Element und seinem Fokusring:

• Äußerer versetzter Umriss (Outer Offset Outline): Der Fokusring wird mit einem transparenten Spalt (Versatz) außerhalb der Elementgrenze positioniert. Empfohlen für Buttons, Tags und Links.
• Innerer Fokusring (Inset Focus Ring): Der Fokusring wird innerhalb der Elementgrenzen positioniert. Empfohlen für Textfelder, Auswahlmenüs und Elemente, die durch overflow: hidden beschnitten werden.
• Kontrast-Halo (Dual-Ring): Ein äußerer Ring, der mit einer kontrastierenden sekundären Linie umwickelt ist (z. B. 2px weißer Ring mit einer 1px schwarzen Umrandung). Extrem robust, da er die Sichtbarkeit auf jedem Hintergrund garantiert.

3. Festlegen der WCAG-Kontrast- und Größen-Tokens

Legen Sie die Mindeststylingwerte fest, um WCAG zu erfüllen:

• Setzen Sie die Fokusringdicke auf mindestens 2px (3px bevorzugt).
• Halten Sie ein Mindestkontrastverhältnis von 3:1 gegenüber dem angrenzenden Hintergrund und gegenüber dem unfokussierten Zustand des Elements ein.
• Stellen Sie sicher, dass der Fokusindikator eine Oberfläche hat, die mindestens so groß ist wie ein 2px durchgehender Rand um den Umfang des Steuerelements (WCAG 2.2 Fokus-Erscheinungsbild).

4. Trennen von Zeiger- und Tastatur-Zuständen

Vermeiden Sie „Design-Reibung“, indem Sie die :focus-visible-Pseudoklasse verwenden.

• Tastaturnavigation (:focus-visible): Löst kontrastreiche, visuell prominente Fokusindikatoren aus.
• Maus-/Touch-Interaktion (:focus ohne :focus-visible): Unterdrückt Fokusringe bei Mausklicks oder macht sie extrem subtil, wodurch Design-Beschwerden vermieden werden, während die volle Barrierefreiheit erhalten bleibt.

5. Definieren von Fallbacks für den Hochkontrastmodus

Stellen Sie sicher, dass Fokusindikatoren unter assistierenden Stylingeinstellungen (wie Windows High Contrast Mode / Forced Colors) nicht verschwinden:

• Der native outline mit transparenter Farbe wird automatisch von Forced Colors zugeordnet, aber benutzerdefinierte box-shadow-Stile werden verworfen.
• Fügen Sie immer einen outline-Fallback ein (auch wenn er auf outline: 2px solid transparent gesetzt ist oder outline-color: CanvasText in Media Queries verwendet wird), sodass der Hochkontrastmodus einen sichtbaren Umriss rendert.

Entscheidungsregeln

Regel 1: Platzierung innerer vs. äußerer Ring

• Verwenden Sie einen Äußeren versetzten Umriss (Outer Offset Outline), wenn das Element benutzerdefinierte Ränder hat und keine Überlaufmaske (overflow: hidden) aufweist.
• Verwenden Sie einen Inneren Fokusring (Inset Focus Ring) (box-shadow: inset ...), wenn das Element Teil eines engen Rasters ist, overflow: hidden auf seinem übergeordneten Container hat oder es sich um ein Texteingabefeld handelt, bei dem externe Umrisse mit benachbarten Elementen überlappen würden.

Regel 2: Einfarbiger vs. zweifarbiger Halo

• Verwenden Sie einen Einfarbigen Ring, wenn der Hintergrund gleichmäßig und vorhersagbar ist (z. B. immer hell oder immer dunkel) und der Kontrast mit >= 3:1 überprüft wurde.
• Verwenden Sie einen Zweifarbigen Kontrast-Halo (z. B. dunkelblau innen, reinweiß außen), wenn sich das Element auf Bildern, Farbverläufen, benutzergenerierten Inhalten oder zwischen wechselnden Hintergründen (wie sticky-Header, die über Abschnittsgrenzen scrollen) befindet.

Regel 3: Randradius des Fokusrings

• Der Fokusumriss muss den border-radius seines übergeordneten Steuerelements widerspiegeln.
• Stellen Sie sicher, dass outline-offset positiv ist (z. B. 2px oder 4px) und der Randradius des Umrisses mit der Krümmung der Karte/des Buttons übereinstimmt, oder verwenden Sie box-shadow, der natürlicherweise den abgerundeten Ecken der Komponente zugeordnet wird.

RICHTIG:
[   Schaltfläche (Radius 8px)   ]
   (Abstand: 2px)
============================= Fokusumriss (Radius 10px)

FALSCH:
[   Schaltfläche (Radius 8px)   ]
   (Abstand: 2px)
----------------------------- Fokusumriss (scharfe 90-Grad-Ecken)

Einschränkungen

• Barrierefreiheit (Kontrast): Der Fokusring muss ein Kontrastverhältnis von mindestens 3:1 gegenüber seinem umgebenden Hintergrund aufweisen (WCAG 2.1 SC 1.4.11 Nicht-Text-Kontrast).
• Barrierefreiheit (Sichtbarkeit): Der Indikator muss vollständig sichtbar sein. Fokusindikatoren dürfen niemals hinter sticky-Headern, schwebenden Chat-Widgets oder Overlays versteckt werden (WCAG 2.2 SC 2.4.11 Fokus nicht verdeckt).
• Barrierefreiheit (Erscheinungsbild): Der Fokusindikator muss groß genug sein. Er muss die WCAG 2.2 SC 2.4.13 (Fokus-Erscheinungsbild) Berechnung erfüllen: mindestens 2px Breite und eine Mindestfläche, die dem Umfang multipliziert mit 2px entspricht.
• Responsivität: Fokusindikatoren dürfen den Container nicht dehnen oder einen horizontalen Seitenlayout-Überlauf auslösen. Verwenden Sie immer absolute Positionierung, absolute CSS-Umrisse oder innenliegende Box-Schatten, die den DOM-Layout-Fluss nicht verändern.

Häufige Fehlermuster

• Der :focus { outline: none; }-Radierer: Vollständiges Ausblenden des Fokusindikators, ohne einen robusten Ersatz durch eine Pseudoklasse bereitzustellen.
• Kontrastarme „Geister“-Ringe: Verwenden eines hellgrauen Umrisses auf weißem Hintergrund, wodurch der aktive Fokuszustand für Benutzer mit eingeschränkter Kontrastwahrnehmung unsichtbar wird.
• Die „Abgeschnittener Umriss“-Falle: Platzieren eines äußeren Fokusrings auf einem Element, das sich in einem Container mit overflow: hidden befindet. Der Fokusindikator wird links und rechts abgeschnitten, sodass nur horizontale Streifen übrig bleiben.
• Die „Sticky-Header-Überdeckung“: Tab-Fokus auf ein Ankerelement am oberen Rand des Darstellungsbereichs, aber die sticky-Navigationsleiste überlappt und verdeckt es vollständig (WCAG 2.2 SC 2.4.11 Verstoß).
• Klick-induziertes Fokus-Chaos: Keine Verwendung von :focus-visible, was zu schweren blauen Ringen führt, die bei jedem Mausklick aufleuchten, Designteams frustriert und sie dazu veranlasst, die vollständige Entfernung von Fokus-Stilen zu fordern.
• Forced-Colors-Löschung: Aufbau schöner Fokusringe ausschließlich aus CSS-Benutzerdefinierten Eigenschaften und box-shadow-Werten ohne einen transparenten outline-Fallback, was zu vollständig unsichtbaren Fokusindikatoren im Windows High Contrast Mode führt.

Validierungskriterien

• Jedes interaktive Element zeigt einen gut sichtbaren, deutlichen Fokusindikator an, wenn es über die Tab-Taste angesteuert wird.
• Der Kontrast jedes globalen und komponentenspezifischen Fokusindikators wird mit >= 3:1 gegenüber seinem Hintergrund überprüft.
• Das benutzerdefinierte Fokus-Styling verwendet den :focus-visible-Selektor, um sicherzustellen, dass es bei Tastaturnavigation ausgelöst wird, aber bei Mausklicks sauber bleibt.
• Kein Fokusindikator wird durch overflow: hidden-Regeln des übergeordneten Containers abgeschnitten oder beschnitten (entweder Versatz angepasst oder auf innenliegend umgestellt).
• Tastaturnavigation zu Elementen in der Nähe von sticky-Headern oder schwebenden Elementen hält das fokussierte Element vollständig sichtbar (unter Verwendung von scroll-margin-top-Überschreibungen).
• Fokusindikatoren werden im Hochkontrast/Forced-Colors-Modus mit transparenten Umrissregeln überprüft.
• Die Umfangsfläche benutzerdefinierter Indikatoren erfüllt die Mindestberechnungen von WCAG 2.2 SC 2.4.13.