Kontrast kontrolek formularza
Silktide kontroluje, czy pola formularza, takie jak pola tekstowe i menu rozwijane, wizualnie odróżniają się od otaczającego je obszaru. Pole, które zlewa się ze stroną, jest trudne do znalezienia i użycia dla osób ze słabszym wzrokiem.
Dlaczego to ważne
Aby wypełnić formularz, najpierw trzeba zobaczyć, gdzie znajdują się pola. Białe pole wprowadzania bez obramowania na białej stronie jest niewidoczne dla wielu osób słabowidzących — nie potrafią one określić, gdzie kliknąć lub wpisać tekst. Formularze są zwykle najważniejszą częścią witryny (kontakt, finalizacja zakupu, rejestracja), więc pól, których nie można znaleźć, bezpośrednio przekładają się na utracone zapytania i sprzedaż. Jest to również wymaganie standardu .
Jak to naprawić
- Nadaj kontrolce widoczne obramowanie lub obrys ze wynoszącym co najmniej 3:1 względem otaczającego tła. Zwykle jest to jednolinijkowa zmiana w arkuszu stylów.
/* Pole niewidoczne na białej stronie */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Poprawione: obramowanie ma kontrast co najmniej 3:1 względem tła */
input { background: #fff; border: 1px solid #767676; }
- Ewentualnie wypełnij samą kontrolkę kolorem, który ma kontrast co najmniej 3:1 względem otoczenia.
Jak Silktide to kontroluje
- Znajduje na stronie każde widoczne pole tekstowe, obszar tekstowy i menu rozwijane (
<input>,<textarea>oraz<select>), pomijając elementy wykluczone z kontroli. - Pomija typy pól, których wygląd jest rysowany przez przeglądarkę lub system operacyjny: pola wyboru, przyciski opcji, przyciski przesyłania/resetowania/obrazu, selektory plików i ukryte pola.
- Określa efektywny kolor tła kontrolki oraz kolor tła otaczającego ją obszaru, uwzględniając przezroczystość i elementy nadrzędne.
- Uznaje kontrolkę za spełniającą wymaganie, jeśli jej wypełnienie ma kontrast co najmniej 3:1 względem otaczającego tła. W przeciwnym razie sprawdza każdy kolor obramowania i obrysu kontrolki względem otaczającego tła i uznaje wymaganie za spełnione, jeśli którykolwiek z nich osiąga 3:1.
- Zgłasza kontrolki, dla których żaden element nie osiąga 3:1, pokazując najlepszy znaleziony kontrast.
Rozwiązywanie problemów
Efekty, których nie możemy zmierzyć
Cienie, poświaty, gradienty i obrazy tła nie mają jednego koloru, który można zmierzyć, dlatego kontrast zapewniany wyłącznie przez takie efekty nie jest uwzględniany. Podobnie kontrolka umieszczona na wielu różnych tłach (na przykład z użyciem position: absolute) może nie być mierzalna. Jeśli oznaczona kontrolka jest faktycznie wyraźnie odróżnialna, wynik.
Przyciski, pola wyboru i przyciski opcji nie są kontrolowane
Przyciski nie potrzebują widocznej granicy, o ile ich etykieta jest czytelna, a pola wyboru i przyciski opcji są zwykle rysowane przez przeglądarkę, więc ta kontrola celowo je pomija.
Niestandardowo stylizowane menu rozwijane
Niektóre biblioteki komponentów ukrywają natywną kontrolkę i rysują własny zamiennik. Silktide pomija ukrytą natywną kontrolkę, a widoczny zamiennik jest oceniany jak każdy inny element, gdy jest to możliwe.