Jeśli projekt wyświetla się na urządzeniu mobilnym, zadbaj o to, by elementy interaktywne, takie jak przyciski czy linki, były dostatecznie duże i mieli wokół siebie odpowiednią ilość miejsca, aby można było je łatwo nacisnąć, nie nakładając się na inne elementy. Jest to korzystne dla wszystkich użytkowników, ale zwłaszcza osobom z niepełnosprawnością ruchową.
Minimalny zalecany rozmiar docelowego obszaru dotykowego to około 48 pikseli niezależnych od urządzenia w witrynie z prawidłowo ustawionym widocznym obszarem dla urządzeń mobilnych. Na przykład, mimo że ikona może mieć tylko 24 piksele, można użyć dodatkowego dopełnienia, aby zwiększyć rozmiar elementu dotykowego do 48 pikseli. Obszar o wymiarach 48 x 48 pikseli odpowiada około 9 mm, co odpowiada rozmiarowi opuszki palca.
W wersji demonstracyjnej dodałem do wszystkich linków dopełnienie, aby upewnić się, że mają minimalny rozmiar.
Docelowe elementy dotykowe również powinny znajdować się w odległości około 8 pikseli od siebie, zarówno w poziomie, jak i w pionie, tak aby naciśnięcie palcem przez użytkownika jednego elementu nie dotykało drugiego.
Testowanie docelowych elementów dotykowych
Jeśli Twoim celem docelowym jest tekst, a do określania rozmiaru tekstu i dopełnienia używasz wartości względnych, np. em lub rem, możesz użyć Narzędzi deweloperskich, aby sprawdzić, czy obliczona wartość danego obszaru jest wystarczająco duża.
W poniższym przykładzie jako tekst i dopełnienie używam em.
Sprawdź a linku i w Narzędziach deweloperskich w Chrome przejdź do panelu Computed, w którym możesz przyjrzeć się poszczególnym częściom pudełka i zobaczyć, do jakiego rozmiaru w pikselach się odnoszą.
W Narzędziach deweloperskich w przeglądarce Firefox znajduje się panel układu.
Zobaczysz w nim rzeczywisty rozmiar badanego elementu.
Używanie zapytań o multimedia do wykrywania korzystania z ekranu dotykowego
Zamiast po prostu testować wymiary widocznego obszaru i powodować zgadywanie, że małe wymiary to raczej telefony czy tablety, które z kolei korzystają z ekranu dotykowego, dostępne są teraz bardziej niezawodne sposoby dostosowywania projektu na podstawie rzeczywistych możliwości urządzenia.
Jedną z funkcji związanych z multimediami, które możemy teraz testować w zapytaniach o multimedia, jest to, czy główne dane wejściowe użytkownika to ekran dotykowy (pointer) i czy którekolwiek z aktualnie wykrytych danych wejściowych to ekran dotykowy (any-pointer). Funkcje pointer i any-pointer zwracają wartości fine lub coarse.
Drobnym wskaźnikiem będzie osoba używająca myszy lub trackpada,
nawet jeśli mysz jest połączona z telefonem przez Bluetooth.
Wskaźnik coarse oznacza ekran dotykowy, który może być urządzeniem mobilnym, ale może też być ekranem laptopa lub dużym tabletem.
Jeśli dostosowujesz CSS w zapytaniu o media w celu zwiększenia docelowego elementu dotykowego, przetestowanie wskaźnika przybliżonego pozwoli Ci zwiększyć tę liczbę w przypadku wszystkich użytkowników ekranów dotykowych. Zapewnia to większy obszar kliknięcia niezależnie od tego, czy jest to telefon, czy większe urządzenie.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Więcej informacji o funkcjach multimedialnych interakcji, takich jak wskaźnik, znajdziesz w artykule Podstawy elastycznego projektowania witryn.