Elementy dotykowe to obszary strony internetowej, z którymi użytkownicy urządzeń dotykowych mogą wchodzić w interakcje. Przyciski, linki i elementy formularzy mają elementy dotykowe.
Wiele wyszukiwarek ustala ranking stron na podstawie ich dostosowania do komórek. Jeśli elementy dotykowe są dostatecznie duże i oddalone od siebie, strona będzie lepiej dostosowana do urządzeń mobilnych i dostępna.
Audyt dotyczący elementów dotykowych w Lighthouse niezaliczony
Lighthouse oznacza strony z elementami docelowymi kliknięcia, które spełniają oba te warunki:
- Cel jest mniejszy niż 48 x 48 pikseli.
- Co najmniej 25% obszaru docelowego, który znajduje się w odległości 48 pikseli od środka celu, pokrywa się z innym celem.
Jeśli kontrola się nie powiedzie, Lighthouse pojawią się w tabeli z 3 kolumnami:
| Cel kliknięcia | Element dotykowy o nieprawidłowym rozmiarze. |
| Rozmiar | Rozmiar prostokąta ograniczającego celu w pikselach. |
| Pokrywający się cel | Które inne elementy dotykowe znajdują się zbyt blisko siebie. |
Jak poprawić elementy dotykowe
Opcja 1: zwiększ rozmiar elementów dotykowych, które są zbyt małe.
Elementy dotykowe o wymiarach 48 na 48 pikseli nie przejdą kontroli. Jeśli masz elementy, które nie powinny pokazywać więcej (np. ikony), spróbuj zwiększyć właściwość padding:
padding możesz powiększać elementy dotykowe bez zmiany wyglądu elementów.
Opcja 2: zwiększ odstępy między elementami dotykowymi, które znajdują się zbyt blisko siebie, korzystając z właściwości takich jak margin. 8 pikseli między elementami dotykowymi to dobry punkt wyjścia, ale nie zawsze jest to wystarczająco duże odstępy, aby przejść kontrolę, zwłaszcza w przypadku bardzo małych elementów.
Zasoby
- Dostępne elementy dotykowe: więcej informacji o tym, jak zadbać o to, aby elementy dotykowe były dostępne dla wszystkich użytkowników.
- Kod źródłowy kontroli elementów dotykowych o nieodpowiednim rozmiarze