Odległość między komponentami interaktywnymi
Silktide mierzy rozmiar i odstępy między przyciskami, linkami oraz formantami formularzy na Twoich stronach. Małe formanty umieszczone blisko siebie łatwo nacisnąć przez pomyłkę, dlatego każdy z nich powinien mieć co najmniej 24 na 24 piksele lub wystarczająco dużo wolnej przestrzeni wokół siebie.
Dlaczego to jest ważne
Każdy może nie trafić w mały przycisk, ale dla osób z drżeniem rąk, artretyzmem lub ograniczoną precyzją ruchów ciasno rozmieszczone formanty sprawiają, że korzystanie ze strony staje się naprawdę trudne — można wybrać niewłaściwy link, wysłać niewłaściwy formularz albo całkowicie zrezygnować. Problem jest największy na ekranach dotykowych, gdzie opuszek palca jest znacznie mniej precyzyjny niż wskaźnik myszy.
To kryterium sukcesu 2.5.8 (Rozmiar celu (minimum)), wymaganie w WCAG 2.2, dlatego stanowi część poziomu zgodności, do którego dąży większość organizacji.
Jak to naprawić
- Ustaw każdy element interaktywny na co najmniej 24 na 24 piksele . Zwykle wystarczy ustawić
min-widthimin-heightalbo dodać dopełnienie. - Możesz też dodać odstępy między formantami. Wyobraź sobie okrąg o średnicy 24 pikseli ze środkiem na każdym małym formancie: nie może on nachodzić na żaden inny formant ani na okrąg wokół innego małego formantu. Mniejsze cele są dopuszczalne, gdy nic innego nie znajduje się tak blisko.
- Zwróć szczególną uwagę na przyciski z ikonami, linki paginacji i ikony mediów społecznościowych, które często są za małe i ciasno zgrupowane.
/* Problem: przyciski ikon o rozmiarze 16 px stykają się ze sobą */
.toolbar button {
width: 16px;
height: 16px;
}
/* Poprawka: powiększ klikalny obszar do co najmniej 24 x 24 */
.toolbar button {
min-width: 24px;
min-height: 24px;
}
Jak Silktide to testuje
- Testuj zarówno mobilną, jak i komputerową wersję każdej strony; wyniki mogą się między nimi różnić.
- Znajdź elementy interaktywne: linki, przyciski, pola formularza i obszary mapy obrazkowej.
- Pomijaj elementy, które zwykle nie są widoczne, takie jak treść umieszczona poza ekranem dla , oraz wszelkie elementy wykluczone z kontroli.
- Zalicza każdy element o szerokości co najmniej 24 pikseli i wysokości co najmniej 24 pikseli.
- Pomijaj formanty znajdujące się w zdaniu lub bloku tekstu, które WCAG wyłącza spod tej reguły.
- Dla każdego pozostałego małego elementu narysuj wokół niego, zgodnie z opisem w WCAG, okrąg o średnicy 24 pikseli ze środkiem na tym elemencie.
- Zgłoś element, jeśli jego okrąg nachodzi na inny formant lub na okrąg wokół innego małego formantu, chyba że oba są linkami prowadzącymi do tego samego miejsca. Pozycje są mierzone z dokładnością do 0,1 piksela, więc nakładanie się o 0,2 piksela lub mniej nie jest zgłaszane. Elementy przypięte do ekranu, takie jak nagłówki przyklejone, są porównywane z innymi przypiętymi elementami, a nie z treścią przewijaną pod nimi.
Rozwiązywanie problemów
Mały formant przeszedł kontrolę
Sam rozmiar nie oznacza błędu: mały formant przechodzi kontrolę, jeśli ma wystarczająco dużo wolnej przestrzeni wokół siebie, znajduje się w tekście albo sąsiaduje wyłącznie z linkami prowadzącymi do tego samego miejsca. Odzwierciedla to wyjątki dopuszczone przez samo WCAG.
Formanty mają wystarczająco dużo miejsca na moim telefonie
Test mobilny korzysta z telefonu o szerokości 320 pikseli — najmniejszej szerokości, przy której WCAG oczekuje prawidłowego działania strony (zobacz Dlaczego Silktide testuje na iPhonie 5?). Formanty umieszczone na obrazie lub mapie, na przykład znaczniki na planie piętra, zwykle zbliżają się do siebie wraz ze zwężaniem strony. Mogą się nakładać przy szerokości 320 pikseli, a na szerszym telefonie mieć dużo wolnego miejsca.
Pozycja formantu ma znaczenie
WCAG wyłącza formant, którego rozmiar i pozycja są niezbędne dla prezentowanej treści, na przykład pinezki na mapie, a także formant, którego działanie oferuje również inny, wystarczająco duży formant na tej samej stronie. Silktide nie może automatycznie ocenić żadnego z tych przypadków. Jeśli któryś ma zastosowanie, zapisz dotyczącą wyniku.
Wyświetlane są tylko niektóre błędy
Silktide zgłasza do 10 najpoważniejszych przykładów na stronę. Poprawienie wspólnego stylu zwykle rozwiązuje wiele wyników jednocześnie.
Chcę stosować bardziej rygorystyczny standard
Ta kontrola testuje minimum poziomu AA, czyli 24 na 24 piksele. Powiązana kontrola Wystarczająco duże formanty testuje bardziej rygorystyczne zalecenie poziomu AAA, czyli 44 na 44 piksele.