Małe elementy sterujące na urządzeniach mobilnych
Silktide ładuje każdą stronę na symulowanym urządzeniu mobilnym i zgłasza łącza, przyciski oraz elementy sterujące formularzy, które są zbyt małe, aby można było niezawodnie je dotknąć. Aby przejść tę kontrolę, elementy sterujące muszą mieć co najmniej 12 pikseli szerokości i 12 pikseli wysokości.
Dlaczego to ważne
Palce są mniej precyzyjne niż wskaźniki myszy. Element sterujący, który łatwo kliknąć na komputerze, może być niemal niemożliwy do dotknięcia na telefonie — odwiedzający chybiają, dotykają sąsiedniego łącza i trafiają w miejsce, którego nie zamierzali odwiedzić. Najbardziej dotyczy to osób z ograniczeniami ruchowymi, drżeniem rąk lub większymi palcami, ale każdy może przypadkowo dotknąć zbyt małego celu.
Próg 12 pikseli wykrywa tylko elementy sterujące o znacznie zbyt małym rozmiarze; wygodne cele dotykowe są zdecydowanie większe (powszechne zalecenia wskazują około 44 pikseli).
Jak to naprawić
- Zwiększ rozmiar oznaczonego elementu sterującego — użyj większego tekstu, większego dopełnienia lub jawnego minimalnego rozmiaru w :
/* Nadaj celom dotykowym wygodny minimalny rozmiar */
a.icon-button {
min-width: 44px;
min-height: 44px;
}
- W przypadku łączy zawierających tylko ikonę powiększ obszar możliwy do dotknięcia za pomocą dopełnienia, zamiast powiększać samą ikonę.
- Jeśli element w ogóle nie powinien być interaktywny — na przykład puste, pozostałe łącze — usuń go zamiast zmieniać jego rozmiar.
Jak Silktide wykonuje tę kontrolę
- Ładuje stronę na symulowanym urządzeniu mobilnym.
- Znajduje każdy interaktywny element sterujący: łącza, obszary map obrazkowych, pola formularzy, listy rozwijane, obszary tekstowe i przyciski.
- Pomija elementy sterujące ukryte podczas ładowania strony, niemające rozmiaru lub znajdujące się całkowicie poza ekranem.
- Mierzy każdy pozostały element sterujący i zgłasza te, które są węższe lub niższe niż 12 pikseli.
Rozwiązywanie problemów
Element pojawia się dopiero po interakcji
Silktide mierzy stronę podczas jej ładowania. Elementy sterujące w menu lub panelach, które otwierają się później, są mierzone w stanie początkowym, co czasami może oznaczyć element będący w trakcie animacji. Jeśli element sterujący ma wygodny rozmiar, gdy można go faktycznie użyć, wynik.
Jak ma się to do zasad WCAG dotyczących rozmiaru celu?
Ta kontrola dotyczy użyteczności na urządzeniach mobilnych i ma celowo łagodny próg. Powiązane kontrole — Rozmiar celu na poziomie AA oraz Odpowiedni rozmiar celu na — stosują bardziej rygorystyczne wymagania dotyczące rozmiaru, z bardziej szczegółowymi wyjątkami.