Kontrast von Formularelementen
Silktide prüft, ob Formularfelder, wie Textfelder und Dropdown-Menüs, sich visuell vom sie umgebenden Bereich abheben. Ein Feld, das mit der Seite verschmilzt, ist für Menschen mit eingeschränktem Sehvermögen schwer zu finden und zu verwenden.
Warum das wichtig ist
Um ein Formular auszufüllen, müssen Sie zuerst sehen, wo sich die Felder befinden. Ein weißes Eingabefeld ohne Rahmen auf einer weißen Seite ist für viele Menschen mit Sehbeeinträchtigung unsichtbar – sie können nicht erkennen, wo sie klicken oder tippen sollen. Formulare sind in der Regel der folgenreichste Teil einer Website (Kontakt, Checkout, Registrierung), daher führen Felder, die nicht gefunden werden, direkt zu verlorenen Anfragen und Umsätzen. Dies ist außerdem eine -.
So beheben Sie das Problem
- Geben Sie dem Steuerelement eine sichtbare Rahmenlinie oder Kontur mit einem von mindestens 3:1 zum umgebenden Hintergrund. Dies ist in der Regel eine einzeilige Änderung in Ihrem Stylesheet.
/* Feld auf weißer Seite unsichtbar */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Behoben: Rahmen kontrastiert mindestens 3:1 mit dem Hintergrund */
input { background: #fff; border: 1px solid #767676; }
- Alternativ können Sie das Steuerelement selbst mit einer Farbe füllen, die sich mit mindestens 3:1 von seiner Umgebung abhebt.
So testet Silktide dies
- Findet jedes sichtbare Texteingabefeld, jeden Textbereich und jedes
Dropdown (
<input>,<textarea>und<select>) auf der Seite und überspringt alle Elemente, die Sie von der Prüfung ausgeschlossen haben. - Überspringt Eingabetypen, deren Darstellung vom Browser oder Betriebssystem gezeichnet wird: Kontrollkästchen, Optionsfelder, Senden-/Zurücksetzen-/Bild-Schaltflächen, Dateiauswahlfelder und versteckte Eingaben.
- Ermittelt die effektive Hintergrundfarbe des Steuerelements und die Hintergrundfarbe des umgebenden Bereichs, wobei Transparenz und übergeordnete Elemente berücksichtigt werden.
- Das Steuerelement besteht, wenn seine Füllung mindestens 3:1 zum umgebenden Hintergrund kontrastiert. Andernfalls werden jede Rahmen- und Konturfarbe des Steuerelements gegen den umgebenden Hintergrund geprüft, und es besteht, wenn eine davon 3:1 erreicht.
- Meldet Steuerelemente, bei denen nichts 3:1 erreicht, und zeigt den besten gefundenen Kontrast an.
Fehlerbehebung
Effekte, die wir nicht messen können
Schlagschatten, Leuchteffekte, Verläufe und Hintergrundbilder haben keine
einzelne Farbe, die gemessen werden kann. Daher wird Kontrast, der nur durch
solche Effekte entsteht, nicht angerechnet. Ebenso lässt sich ein
Steuerelement, das über mehreren unterschiedlichen Hintergründen positioniert
ist (zum Beispiel mit position: absolute), möglicherweise nicht messen. Wenn
ein beanstandetes Steuerelement tatsächlich deutlich erkennbar ist,
Sie den Befund.
Schaltflächen, Kontrollkästchen und Optionsfelder werden nicht geprüft
Schaltflächen benötigen keine sichtbare Begrenzung, solange ihre Beschriftung lesbar ist, und Kontrollkästchen sowie Optionsfelder werden üblicherweise vom Browser gezeichnet. Dieser Check lässt sie daher bewusst außen vor.
Benutzerdefiniert gestaltete Dropdowns
Einige Komponentenbibliotheken verbergen das native Steuerelement und zeichnen ihren eigenen Ersatz. Silktide überspringt das verborgene native Steuerelement, und der sichtbare Ersatz wird nach Möglichkeit wie jedes andere Element bewertet.