In diesem Artikel wird beschrieben, warum und wie wir die Simulation von Farbfehlsichtigkeit in DevTools und dem Blink-Renderer implementiert haben.
Hintergrund: Schlechter Farbkontrast
Text mit geringem Kontrast ist das häufigste automatisch erkennbare Problem mit der Barrierefreiheit im Web.
Laut der WebAIM-Analyse der Barrierefreiheit der 1 Million beliebtesten Websites haben über 86% der Startseiten einen geringen Kontrast. Im Durchschnitt enthält jede Startseite 36 verschiedene Textelemente mit niedrigem Kontrast.
Mit den DevTools Kontrastprobleme finden, nachvollziehen und beheben
Die Chrome-Entwicklertools können Entwicklern und Designern helfen, den Kontrast zu verbessern und barrierefreiere Farbschemata für Webanwendungen auszuwählen:
- In der Kurzinfo zum Prüfmodus, die oben auf der Webseite angezeigt wird, wird das Kontrastverhältnis für Textelemente angezeigt.
- Die Farbauswahl in den DevTools zeigt schlechte Kontrastverhältnisse für Textelemente an, die empfohlene Kontrastlinie, um manuelle die Auswahl besserer Farben zu unterstützen, und kann sogar barrierefreie Farben vorschlagen.
- Sowohl im Steuerfeld „Preisvergleichsportal“ als auch im Bericht zur Lighthouse-Prüfung der Barrierefreiheit werden Textelemente mit geringem Kontrast auf Ihrer Seite aufgeführt.
Vor Kurzem haben wir dieser Liste ein neues Tool hinzugefügt, das sich ein wenig von den anderen unterscheidet. Die oben genannten Tools konzentrieren sich hauptsächlich darauf, Informationen zum Kontrastverhältnis zu liefern und Ihnen Optionen zum Korrigieren anzubieten. Wir haben festgestellt, dass Entwicklern in den DevTools noch immer keine Möglichkeit geboten wird, dieses Problemfeld besser zu verstehen. Deshalb haben wir auf dem Tab „Rendering“ in den DevTools eine Simulation von Sehschwäche implementiert.
In Puppeteer können Sie diese Simulationen mithilfe der neuen page.emulateVisionDeficiency(type) API programmatisch aktivieren.
Farbsehschwäche
Etwa 1 von 20 Menschen leidet an einer Farbsehschwäche (auch als „Farbenblindheit“ bezeichnet). Solche Beeinträchtigungen erschweren es, verschiedene Farben zu unterscheiden, was Kontrastprobleme verstärken kann.