A oto i kolejne szybkie Wpadki i wypadki! Przyjrzymy się niestandardowym polom wyboru (checkboxom).
Zacznijmy od prostego przykładu. Może nie jest to najładniejszy z niestandardowych checkboxów, ale w tym wypadku nie o wygląd chodzi! Skupimy się na działaniu tego typu elementów. Na pierwszy rzut oka wszystko wygląda poprawnie. Można kliknąć checkboxa i widać, że jest zaznaczony. Można go kliknąć jeszcze raz i się odznacza. Problem polega na tym, że w sumie to jedyne, co działa.
Najważniejszy problem z tak zrobionym checkboxem jest taki, że nie da się go obsługiwać z poziomu klawiatury. Jest to spowodowane ukryciem go przy pomocy display: none. W przypadku natywnego checkboxa można go sfocusować przy pomocy klawisza Tab, a nastepnie zaznaczyć naciskając spację. W przypadku tego checkboxa nie da się tego zrobić, ponieważ elementy z display: none są niejako całkowicie usuwane z treści strony. A to oznacza, że oprócz nawigacji klawiaturą nie działa też inna rzecz: widoczność tego pola w technologii asystującej (zwłaszcza w czytnikach ekranu). Jest to związane z ignorowaniem niewyświetlanch elementów w drzewku dostępności. Na szczęście można to łatwo naprawić, stosując sposób ukrywania przyjazny dla czytników ekranu. W dużym skrócie, polega on na „przycięciu” ukrywanego elementu do jednego piksela, a następnie przysłonięciu go przy pomocy odpowiedniego ustawienia marginesów. Dzięki temu element teoretycznie wciąż jest wyświetlany, chociaż go nie widać. A fakt, że jest wyświetlany, sprawia, że można się dostać do niego z poziomu klawiatury oraz jest czytany przez czytniki ekranowe.
Ale obsługa klawiaturą nie sprowadza się tylko do tego, że do jakiegoś elementu można dotrzeć przy pomocy Taba. Jeśli się już do tego elementu dotrze, fajnie byłoby wiedzieć, że się dotarło. Potrzeba zatem wskaźnika focusu. Bardzo dużo o tworzeniu dostępnych wskaźników focusu napisała Sara Soueidan i bardzo polecam jej artykuł. W przypadku naszego checkboxa wystarczy dodać np. niebieski outline z lekkim odstępem od samego pola:
.custom-checkbox__input:focus + .custom-checkbox__label::before {
outline: 2px navy solid;
outline-offset: 3px;
}Ostatni z problemów jest bardziej natury UX-owej. Użytkownicy mają swoje przyzwyczajenia z obcowania z wieloma różnymi stronami i nie powinniśmy ich burzyć bez wyraźnego powodu. Checkboxy powinny być kwadratowe, okrągły kształt jest zarezerwowany dla pól jednokrotnego wyboru (radiobuttonów). Warto zatem poprawić nasze pole, by było bardziej „kanciaste”.
Na CodePenie można sprawdzić checbkox po poprawkach. Polecam też artykuł o stylowaniu radiobuttonów przy pomocy appearance w CSS-ie. A do prostego stylowania przydać się może własność accent-color.