Неверный размер целей касания (Tap targets are not sized appropriately)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Цели касания — это области веб-страницы, с которыми пользователи на сенсорных устройствах могут взаимодействовать. Цели касания есть у кнопок, ссылок и элементов форм.

Многие поисковые системы ранжируют страницы по тому, насколько они удобны для пользователей мобильных устройств. Достаточный размер целей касания и адекватное расстояние между ними делают страницу более удобной для использования с мобильных устройств.

Аудит целей касания в Lighthouse

Lighthouse помечает страницы, на которых цели касания слишком малы или расположены слишком близко друг к другу.

Аудит Lighthouse, показывающий цели касания неправильного размера

Если на странице будут цели, размер которых менее 48 × 48 пкс или расстояние между которыми менее 8 пкс, аудит будет считаться непройденным. В этом случае Lighthouse выводит результаты в таблице с тремя столбцами:

Цель касания (Tap Target)Цель касания с неверным размером.
Размер (Size)Размер ограничивающего прямоугольника цели в пикселях.
Перекрывающаяся цель (Overlapping Target)Другие цели касания, находящиеся слишком близко (если таковые имеются).

Each SEO audit is weighted equally in the Lighthouse SEO Score, except for the manual Structured data is valid audit. Learn more in the Lighthouse Scoring Guide.

Как исправить цели касания

Шаг 1. Увеличьте размер слишком маленьких целей касания. Цели касания размером 48 ×48 пкс аудит не проходят. Если какие-то элементы не должны выглядеть больше этого размера (например, значки), попробуйте увеличить свойство padding:

Цели касания правильного размера
Свойство padding увеличивает цель касания, не изменяя внешний вид элемента

Шаг 2. Увеличьте расстояние между целями касания, которые находятся слишком близко друг к другу. Для этого можно использовать, например, свойство margin. Обеспечьте расстояние как минимум 8 пкс.

Материалы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.