cemyaşlı.
DE
Cem Yaşlı / Menü
← Studionotizen
UI und UX2 Min. Lesezeit

Welche Karte ist ausgewählt? So funktioniert die Auswahl auch ohne Farbe

Mit einer Graustufenprobe prüfen Sie, ob Häkchen, Beschriftung und Fokusring in einer Schriftauswahl eindeutig bleiben.

Cem Yaşlı
Zwei Karten mit der Schriftart Aa in verschiedenen Grautönen, nebeneinander auf dem Bildschirm.

Zwei Karten in einer Schriftauswahl zeigen jeweils „Aa“. Die gewählte Karte wird violett. Beim nächsten Tabulatorschritt erscheint ein violetter Rahmen um ein anderes Steuerelement. Welche Schrift gilt jetzt? Die Farbe allein beantwortet das nicht.

Auswahl und Tastaturfokus getrennt gestalten

Beschriften Sie die Karten mit „Serifenschrift“ und „Serifenlose“. Markieren Sie im ersten Entwurf die Auswahl nur durch eine Füllfarbe. Ergänzen Sie im zweiten ein Häkchen und den Text „Ausgewählt“. Der äußere Rahmen bleibt dem Tastaturfokus vorbehalten. Wandert der Fokus weiter, bleibt das Häkchen an der gewählten Karte.

Drei Fragen vor der Übergabe

Ist die gewählte Schrift auch in Graustufen erkennbar? Lassen sich Auswahl und Fokus beim Navigieren mit der Tastatur auseinanderhalten? Verdeckt das Häkchen bei schmaler Ansicht eine zweizeilige Beschriftung? Für die Umsetzung eignen sich beschriftete Radiobuttons mit gemeinsamem Namen, deren Auswahlzustand auch für Hilfstechnologien verfügbar ist. Eine Graustufenprobe ersetzt den Tastaturtest nicht.

W3C: WCAG 2.2, 1.4.1 · W3C-Empfehlung vom 5. Oktober 2023

Aus dem Skizzenbuch

Adobe MAX 2026: Was die lokale MCP-Anbindung für Designer bedeutet ↗Welche Maße braucht die Gestaltung eines Leitsystems im Hotel? ↗Alle Beiträge ↗