Мелкие кнопки и ссылки на телефоне: по ним трудно попасть пальцем
Что это значит
Мы открыли главную в браузере с экраном телефона и нашли кнопки и ссылки размером меньше 24 пикселей, рядом с которыми вплотную стоят другие. Обычно это иконки соцсетей, пункты меню, ссылки в подвале, стрелки слайдера. Ссылки внутри обычного текста мы не считаем.
Чем мешает
Палец больше маленькой кнопки, и посетитель попадает не туда: открывает не тот раздел или не может нажать вовсе. Это раздражает и мешает оформить заявку или заказ.
Как исправить
WordPress
- Найдите элементы из примеров отчёта (подсказка — их класс и текст). Добавьте им внутренние отступы, чтобы область нажатия стала 44–48 px, кодом из примера ниже в «Внешний вид → Настроить → Дополнительные стили».
- Для иконок соцсетей и меню во многих темах есть настройка размера в «Настроить».
Tilda
- Увеличьте размер иконок соцсетей и кнопок в настройках блока для мобильной версии, раздвиньте пункты меню. В Zero Block задайте кнопкам размер не меньше 44 px на ширине 320–480.
1С-Битрикс
- Попросите разработчика увеличить области нажатия у элементов из примеров отчёта в стилях шаблона (пример кода ниже).
OpenCart
- Добавьте отступы ссылкам в меню, подвале и иконкам в файле стилей темы (пример кода ниже).
Другой движок или свой сервер
- Сделайте кнопки и ссылки в меню, подвале и иконки не меньше 44–48 px по высоте за счёт отступов (padding) или раздвиньте их, чтобы между ними было хотя бы 8 px.
- Сам значок может оставаться маленьким — важна область, по которой можно нажать.
Пример кода
Замените example.by на адрес своего сайта.
@media (max-width: 768px) {
/* пример: ссылки меню, подвала и иконки соцсетей */
.menu a, .footer a, .social a { display: inline-block; min-height: 44px; min-width: 44px; padding: 10px; }
}Мы считаем кнопку проблемной, только если она меньше 24 px и квадрат 24×24 вокруг её центра задевает соседнюю кнопку — так советует стандарт доступности WCAG 2.2. Отдельно стоящая маленькая кнопка не считается.
Google рекомендует ещё больший размер — около 48 px.
Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
На телефоне на главной есть кнопки и ссылки меньше 24 px, стоящие вплотную к соседним (примеры с классами — в отчёте). Увеличьте, пожалуйста, области нажатия до 44–48 px или раздвиньте элементы (промежуток от 8 px).
Как проверить, что всё исправлено
Проверьте сайт снова на yasnoseo.by.