Verschiedene Farbthemen mit einem zweifarbigen Fokusindikator unterstützen
Benutzt ihr die Tastatur, um im Internet zu surfen? Wenn ja, dann werdet ihr es zu schätzen wissen, wenn der Fokusindikator deutlich sichtbar ist. Dieses Barrierefreiheits-Feature ist besonders wichtig für Menschen mit motorischen Beeinträchtigungen, welche die Tastatur statt der Maus nutzen, um auf einer Webseite zu navigieren.
Ich empfehle generell, die Pseudoklasse :focus-visible zu verwenden, um eigene Fokusindikatoren zu definieren. Weitere Informationen findet ihr in meinem Artikel „Gestalte deutlich sichtbaren Tastaturfokus mit :focus-visible“. Aber wie berücksichtigt man verschiedene Farbthemen und den Dark Mode?
Foto: © cottonbro / pexels.com
Die elegante Lösung lautet: Definiert einen zweifarbigen Fokusindikator, der einen ausreichenden Kontrast zu jedem einfarbigen Hintergrund aufweist. Die Technik C40 des W3C empfiehlt diese Lösung als eine Möglichkeit, die WCAG-Kriterien 2.4.7: Fokus sichtbar und 2.4.13: Fokus-Erscheinungsbild zu erfüllen.
Demo: Zweifarbiger Fokusindikator
Hier ist meine Demo einer barrierefreien zweifarbigen Fokusanzeige. Mit der Checkbox „Dark Mode“ könnt ihr zwischen hellem und dunklem Modus umschalten. Fokussiert die Schaltfläche und den Link mit der Tab-Taste und beobachtet den Fokusindikator:
Wie funktioniert das Ganze?
Die (nicht allzu) geheimen CSS-Zutaten
Um den zweifarbigen Fokusindikator zu erstellen, kombiniert einfach die CSS-Eigenschaften outline und box-shadow, um eine helle und dunkle Linie um das fokussierte Element zu zeichnen.
:is(a[href], button):focus-visible {
/* inner indicator */
outline: 3px #fff solid;
outline-offset: 0;
/* outer indicator */
box-shadow: 0 0 0 5px #000;
}
Eine der Linien bietet immer einen ausreichenden Kontrast zur aktuellen Hintergrundfarbe. In meiner Demo habe ich eine einfache Kombination aus reinem Weiß und Schwarz verwendet. Ihr könnt aber auch andere Farben verwenden, wie die W3C-Technik erklärt:
As long as the two indicator colors have a contrast ratio of at least 9:1 with each other, at least one of the two colors is guaranteed to meet 3:1 contrast with any solid background color.Der zweifarbige Fokusindikator funktioniert sogar im Forced Colors Modus. Wenn ihr mit diesem Feature nicht vertraut seid, lest meinen Artikel „CSS-Tricks für bessere Sichtbarkeit im Forced Colors Modus“.
Erstellt am