Цели касания — это области веб-страницы, с которыми могут взаимодействовать пользователи сенсорных устройств. Кнопки, ссылки и элементы форм имеют цели касания.
Многие поисковые системы ранжируют страницы на основе того, насколько они удобны для мобильных устройств. Если цели касания достаточно велики и расположены достаточно далеко друг от друга, ваша страница станет более удобной для мобильных устройств и доступной.
Как провалился аудит целей Lighthouse
Маяк помечает страницы с целями касания, которые соответствуют обоим этим условиям:
- Размер цели меньше 48 на 48 пикселей.
- По крайней мере, 25 % целевой области в пределах 48 пикселей от центра цели перекрывается с другой целью.
Если проверка не удалась, Lighthouse отображает результаты в таблице с тремя столбцами:
| Нажмите «Цель» | Цель касания имеет неправильный размер. |
| Размер | Размер ограничивающего прямоугольника цели в пикселях. |
| Перекрывающаяся цель | Какие другие цели касания, если таковые имеются, находятся слишком близко. |
Как исправить цели касания
Вариант 1. Увеличьте размер слишком маленьких объектов касания. Целевые объекты размером 48 на 48 пикселей никогда не проходят проверку. Если у вас есть элементы, которые не должны быть больше (например, значки), попробуйте увеличить свойство padding :
padding , чтобы увеличить размер касания без изменения внешнего вида элемента. Вариант 2. Увеличьте расстояние между целями касания, которые расположены слишком близко друг к другу, используя такие свойства, как margin . 8 пикселей между целями касания — хорошая отправная точка, но не всегда достаточно для прохождения проверки, особенно для очень маленьких целей.
Ресурсы
- Доступные цели касания : дополнительная информация о том, как обеспечить доступность целей касания для всех пользователей.
- Исходный код для целей Tap не имеет соответствующего размера для проверки.