Проверить размер тап-зон

Зачем проверять размер тап-зон

Тап-зона (tap target) — это область экрана, которую пользователь нажимает пальцем на мобильном устройстве. Кнопки, ссылки, чекбоксы, пункты меню — все это тап-зоны. Если элемент слишком мелкий или стоит вплотную к соседнему, пользователь промахивается и нажимает не туда. Это не мелочь: каждое ложное нажатие раздражает, а два-три подряд — и человек закрывает вкладку.

Google рекомендует минимальный размер тап-зоны 48×48 CSS-пикселей. Это примерно 9 мм на экране — площадь, по которой средний палец может попасть уверенно. Lighthouse включает аудит «Tap targets are not sized appropriately» в категорию SEO и Best Practices. Если тап-зоны мелкие — аудит провален, и это прямой сигнал поисковой системе о проблемах мобильной версии.

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

По моему опыту, проблема тап-зон массово встречается на сайтах с адаптивной версткой, которая «вроде работает». Страница отображается без горизонтальной прокрутки, текст читается, но ссылки в подвале стоят вплотную друг к другу, пункты меню слишком мелкие, а кнопки в формах не увеличены под палец. Всё это снижает конверсию и портит поведенческие факторы.

Пошаговая инструкция

Шаг 1. Проведите аудит через Lighthouse

Lighthouse — встроенный инструмент Chrome DevTools, который автоматически находит мелкие тап-зоны. Чтобы запустить проверку:

1. Откройте страницу в Google Chrome.
2. Нажмите F12 (или Ctrl+Shift+I) для открытия DevTools.
3. Перейдите на вкладку Lighthouse.
4. Выберите категорию SEO (именно в ней находится аудит тап-зон).
5. Установите режим Mobile.
6. Нажмите Analyze page load.

В результатах найдите раздел «Tap targets are not sized appropriately». Lighthouse покажет список элементов, которые меньше 48x48px или расположены слишком близко к другим кликабельным элементам. Для каждого проблемного элемента Lighthouse указывает его фактический размер и ближайший конфликтующий элемент.

Проверяйте не только главную страницу. Пройдитесь по всем типам шаблонов: статьи блога, страницы услуг, каталоги, формы обратной связи, страницы контактов. Проблемы с тап-зонами часто прячутся в конкретных шаблонах.

Шаг 2. Проверьте вручную через Chrome DevTools

Lighthouse находит не все проблемы. Ручная проверка обязательна. Включите режим эмуляции мобильного устройства в DevTools (Ctrl+Shift+M) и пройдите по всей странице, обращая внимание на следующие элементы:

• Навигационное меню. Пункты меню, особенно с подменю, должны быть достаточно крупными. На мобильных каждый пункт должен занимать не менее 48px по высоте.
• Ссылки в тексте. Если в абзаце несколько ссылок подряд через запятую или в одной строке — они могут оказаться слишком близко друг к другу.
• Подвал (footer). Классическое место скопления мелких ссылок: политика конфиденциальности, пользовательское соглашение, карта сайта — всё в одну строку мелким шрифтом.
• Пагинация. Номера страниц часто мелкие и стоят вплотную: «1 2 3 4 5 … 10». На мобильных это почти невозможно нажать точно.
• Формы. Чекбоксы, радиокнопки, выпадающие списки. Стандартные HTML-элементы форм очень мелкие на мобильных без дополнительной стилизации.
• Социальные иконки. Ряд иконок соцсетей размером 24x24px без отступов — типичная проблема.

Чтобы проверить размер конкретного элемента, наведите на него курсор в DevTools — всплывающая подсказка покажет размеры в пикселях. Или откройте вкладку Computed в панели стилей и найдите box model элемента.

Шаг 3. Разберитесь с требованиями к размерам

Минимальный размер тап-зоны — 48×48 CSS-пикселей. Но это именно зона нажатия, а не визуальный размер элемента. Иконка может быть 24x24px визуально, но иметь padding, который расширяет область касания до 48x48px. Ключевые правила:

• Минимальный размер: 48x48px (Google), WCAG 2.2 рекомендует 44x44px как абсолютный минимум для уровня AA.
• Оптимальный размер: 48x48px и более. Для основных CTA-кнопок (Call to Action) — делайте больше: 56-64px по высоте.
• Расстояние между тап-зонами: минимум 8px. Google штрафует не только за мелкие элементы, но и за элементы, тап-зоны которых перекрываются или стоят впритык.

Важно: 48px — это CSS-пиксели, а не физические пиксели устройства. На экранах с высокой плотностью (Retina, 2x, 3x) 48 CSS-пикселей занимают больше физических пикселей. Поэтому ориентируйтесь именно на CSS-значения.

Шаг 4. Увеличьте мелкие элементы через CSS

Для увеличения тап-зоны не обязательно делать элемент визуально крупнее. Используйте padding для расширения кликабельной области:

/* Ссылки в навигации */
nav a {
  display: inline-block;
  padding: 12px 16px;
  min-height: 48px;
  min-width: 48px;
}

/* Ссылки в подвале */
footer a {
  display: inline-block;
  padding: 8px 12px;
  min-height: 48px;
  line-height: 32px;
}

/* Иконки соцсетей */
.social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
}

/* Чекбоксы и радиокнопки — увеличиваем область через label */
label {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 0;
  cursor: pointer;
  gap: 8px;
}

Ключевой приём — использовать padding вместо увеличения самого элемента. Так визуальный дизайн не ломается, но область касания становится достаточной. Для inline-элементов (ссылки, span) обязательно добавьте display: inline-block или display: inline-flex, иначе вертикальный padding не повлияет на размер тап-зоны.

Шаг 5. Обеспечьте расстояние между соседними элементами

Даже если каждый элемент по отдельности имеет размер 48x48px, но они расположены впритык — пользователь всё равно будет промахиваться. Минимальный зазор между кликабельными элементами — 8px. Как это реализовать:

/* Расстояние между элементами пагинации */
.pagination a,
.pagination span {
  min-width: 48px;
  min-height: 48px;
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Расстояние между пунктами меню */
.mobile-menu li {
  margin-bottom: 4px;
}

.mobile-menu a {
  display: block;
  padding: 12px 16px;
  min-height: 48px;
}

Обратите внимание на списки ссылок в боковых панелях и в подвалах. Часто ссылки стоят одна под другой с минимальным line-height — на десктопе выглядит компактно, а на мобильных превращается в проблему. Для мобильных увеличьте межстрочный интервал или padding элементов через медиазапрос:

@media (max-width: 768px) {
  .footer-links a {
    display: block;
    padding: 10px 0;
    min-height: 48px;
  }
}

Шаг 6. Отдельно проверьте формы

Формы — зона повышенного риска. Стандартные элементы форм на мобильных устройствах часто слишком мелкие:

• Чекбоксы и радиокнопки. Стандартный размер — около 16x16px. Это в три раза меньше рекомендованного минимума. Решение: увеличьте через CSS или используйте кастомные элементы. Простой способ — сделать кликабельным весь <label>, а не только сам чекбокс.
• Выпадающие списки (select). Высота по умолчанию может быть менее 48px. Задайте min-height: 48px и увеличьте font-size до 16px (это также предотвращает автоматический зум на iOS).
• Кнопка отправки. Кнопка «Отправить» должна быть крупной и заметной. На мобильных — минимум 48px по высоте, а лучше 56px. Ширина — 100% контейнера формы для мобильных.
• Поля ввода (input, textarea). Высота поля — минимум 48px. Размер шрифта — минимум 16px (при 15px и меньше iOS Safari автоматически масштабирует страницу при фокусе на поле, что ломает вёрстку).

Шаг 7. Протестируйте на реальном устройстве

Эмулятор в DevTools — хороший инструмент, но он не заменяет тестирование на реальном смартфоне. Вы нажимаете мышью, а не пальцем. Мышь — это точка, а палец — это площадь примерно 7×7 мм (около 40x40px на экране 160dpi). Возьмите телефон и пройдитесь по сайту:

1. Попробуйте нажать каждый пункт меню. Попадаете с первого раза?
2. Пройдите по ссылкам в тексте. Если в абзаце две ссылки подряд — получается ли нажать нужную?
3. Заполните форму. Удобно ли ставить галочку в чекбоксе? Можно ли точно нажать кнопку отправки?
4. Проскролльте до подвала. Нажмите на ссылки в footer — не промахиваетесь?
5. Откройте страницу каталога или блога. Пагинация удобна?

Если есть возможность, протестируйте на двух устройствах: небольшом экране (iPhone SE или аналогичный Android) и стандартном (iPhone 14 или Samsung Galaxy). Проблемы с тап-зонами ярче всего проявляются на маленьких экранах.

Типичные ошибки

• Увеличивают только визуальный размер, забывая про padding. Иконку сделали 48x48px, но обернули в ссылку без padding. Область касания ссылки остаётся размером с иконку, а вокруг — мёртвая зона, по которой нажатие не срабатывает. Тап-зона определяется по размеру кликабельного элемента (a, button), а не по размеру содержимого внутри.
• Исправляют проблемы только на тех страницах, которые проверил Lighthouse. Lighthouse проверяет одну страницу за раз. Проблемные элементы могут быть на других шаблонах: в корзине, на странице оформления заказа, в личном кабинете. Проверяйте все типы страниц.
• Забывают про мобильное меню. Десктопное меню адаптировали в «бургер», но пункты внутри бургер-меню остались мелкими, с маленьким line-height. Каждый пункт мобильного меню — это тап-зона, и она должна быть не менее 48px по высоте.
• Мелкие ссылки «Читать далее» или «Подробнее». Текстовая ссылка из двух слов без padding — это тап-зона примерно 120x20px. По высоте — меньше половины минимума. Решение: сделать ссылку блочной с padding или оформить как кнопку.
• Пагинация из мелких цифр. Числа «1 2 3 4 5» через пробел — классическая проблема. Каждая цифра занимает примерно 10x20px. На мобильных сделайте пагинацию крупной: каждый элемент — минимум 48x48px, с отступами.
• Игнорируют хлебные крошки (breadcrumbs). Мелкие ссылки через разделитель «>», расположенные вплотную. На десктопе удобно, на мобильных — невозможно точно нажать нужный элемент. Для мобильных увеличьте padding и рассмотрите упрощение хлебных крошек до последних двух уровней.
• Считают 44px достаточным. WCAG 2.1 AA допускает 44x44px, но Google Lighthouse ориентируется на 48x48px. Если хотите пройти аудит Lighthouse без ошибок — ориентируйтесь на 48px.

Что проверить в итоге

• Lighthouse SEO-аудит (Mobile) не показывает ошибку «Tap targets are not sized appropriately» на всех типах страниц
• Все кликабельные элементы имеют минимальный размер тап-зоны 48×48 CSS-пикселей (включая padding)
• Между соседними кликабельными элементами есть зазор не менее 8px
• Пункты мобильного меню имеют высоту не менее 48px и удобны для нажатия пальцем
• Элементы форм (чекбоксы, радиокнопки, select, кнопки) увеличены для мобильных — минимум 48px по высоте
• Поля ввода имеют font-size не менее 16px (предотвращает авто-зум на iOS)
• Пагинация адаптирована под мобильные — каждый элемент не менее 48x48px
• Ссылки в подвале имеют достаточный padding и не стоят вплотную друг к другу
• Хлебные крошки на мобильных имеют увеличенные тап-зоны или упрощены
• Сайт протестирован на реальном мобильном устройстве — все элементы нажимаются с первого раза без промахов