WCAG 2.5.8 Rozmiar celu (minimum) (AA) · aktualizacja
Za mały obszar kliknięcia: przyciski mniejsze niż 24 na 24 piksele
Od WCAG 2.2 każdy klikalny element musi mieć co najmniej 24 na 24 piksele albo tyle wolnego miejsca wokół, żeby okrąg o średnicy 24 px nie nachodził na sąsiedni cel (kryterium 2.5.8, poziom AA). Linki w zwykłym tekście są z tego wyłączone.
Komu to przeszkadza
Osoby z drżeniem rąk, z ograniczoną precyzją ruchów, starsze. I każdy, kto próbuje trafić kciukiem w malutki krzyżyk w okienku promocji, jadąc tramwajem.
Skąd się bierze
- Przyciski „+" i „-" przy ilości produktu w koszyku.
- Krzyżyk zamykający okno, zwykle 16 na 16 px.
- Kropki paginacji karuzeli ustawione tuż obok siebie.
- Ikony mediów społecznościowych w stopce ściśnięte w jednym rzędzie.
Poprawka w kodzie
Przed
.ilosc button { width: 16px; height: 16px; padding: 0; }Po
.ilosc button { min-width: 24px; min-height: 24px; padding: 4px; }
/* ikona może zostać mała, rośnie tylko obszar kliknięcia */Obszar kliknięcia to nie to samo co rozmiar ikony. Padding powiększa cel bez zmiany wyglądu.
Jak sprawdzić to samodzielnie
- Na telefonie spróbuj trafić kciukiem w każdy mały przycisk koszyka i okienek.
- W narzędziach deweloperskich zaznacz przycisk i sprawdź jego wymiary. Poniżej 24 px przy braku odstępu to błąd.
Co wykryje skaner, a czego nie
Skaner wykryje
Skaner zmierzy rozmiar klikalnych elementów i odstępy między nimi. Tam, gdzie nie może jednoznacznie rozstrzygnąć, oznaczy miejsce do ręcznej weryfikacji.
Wymaga sprawdzenia przez człowieka
Automat nie oceni wygody obsługi, na przykład czy przyciski nie są za blisko krawędzi ekranu albo czy łatwo je pomylić.
Najczęstsze pytania
Czy 24 px to wystarczająco dużo?
To minimum na poziomie AA. Kryterium 2.5.5 na poziomie AAA mówi o 44 na 44 px i to jest wygodniejsza wartość dla dotyku. Jeśli możesz, celuj w 44 px dla najważniejszych przycisków.
Czy linki w tekście też muszą mieć 24 px?
Nie. Linki wewnątrz zdania są wyłączone z kryterium, bo ich wysokość wynika z wysokości wiersza tekstu.
Źródła
- [1] Understanding Success Criterion 2.5.8W3C Web Accessibility Initiative (WAI)
- [2] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)
- [3] Understanding Success Criterion 1.4.10W3C Web Accessibility Initiative (WAI)