A11y Mängel – Eingeschränkte Darstellung von UI-Elementen bei aktivierten System-Kontrasteinstellungen
Zusammenfassung
A11y Mängel von Komponenten und der Seite kern-ux.de, wenn über Einstellungen die Kontraststeuerung bzw. Farbe benutzerdefiniert ist.
Verwendetes KERN Kit
KERN Plain-CSS-HTML-Kit
Verwendete Kit-Version
2.2.0
Akzeptanzkriterien
-
Research zu Umsetzungsmöglichkeiten durchgeführt -
Research welche Komponenten sind betroffen -
Untersuchen von der SVG Backroundverwendung -
Kern UX Komponenten verhalten sich in allen gängigen Browsern und Betriebssystemen gleich -
dBarrierefreiheit über dieses Verhalten informieren
Schritte zur Reproduktion
Firefox
Given
du hast Firefox geöffnet und die Anzeige-Einstellungen deines Browsers noch nicht angepasst,
When
du über Einstellungen → Allgemein → Sprache und Erscheinungsbild den Radiobutton „Benutzerdefiniert“ auswählst,
And
du anschließend einen neuen Tab öffnest und die Website www.kern-ux.de/komponenten aufrufst,
Then
werden auf den Komponentenseeiten der Website bestimmte Inhalte – zum Beispiel Icons – nicht sichtbar dargestellt.
Chrome
Given
du hast eine beliebige Website in Google Chrome geöffnet,
When
du die DevTools öffnest (z. B. mit F12 oder Rechtsklick → „Untersuchen“),
And
über das Dreipunkt-Menü den Tab „Rendering“ aktivierst (→ „More tools“ → „Rendering“),
And
du im Abschnitt „Emulate CSS media feature“ die Option „Forced Colors: active“ auswählst,
Then
wird der Farbmodus simuliert, den z. B. Windows-Hochkontrast-Nutzer:innen erleben –
und du kannst überprüfen, wie deine Website im erzwungenen Farbmodus dargestellt wird.
Aktuelles Fehlverhalten
- Inhalte sind visuell nicht sichtbar. Hier ein paar Beispiel
- Atome wie Icons sind in den Komponenten visuell nicht sichtbar
- aktive Radio Button sind visuell nicht sichtbar
- Input fields enable State Linie kaum sichtbar, da Hellgrau dargestellt
- Primary Button sehen aus wie Tertiary-Button
Erwartetes korrektes Verhalten
- sämtliche Komponenten müssen in den gängigen Browsern zu 100% dargestellt werden und die erforderlichen Kontrastwerte erfüllen.
- Gute Beispiel, wie es sein sollte: https://www.w3.org/WAI/ARIA/apg/patterns/
Mögliche Lösungen
(Wenn du kannst, verlinke auf die Codezeile, die für das Problem verantwortlich sein könnte)