Сенсорный интерфейс

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

Сегодня большая часть посетителей коммерческих сайтов приходит с телефонов, и ошибки здесь стоят заявок: мелкая ссылка «Отправить», выпадающее меню, которое раскрывается только при наведении, поле телефона, где открывается буквенная клавиатура.

Основные правила

• Размер цели. WCAG 2.2 на уровне AA требует минимум 24×24 CSS-пикселя или достаточного расстояния до соседних целей. Руководства Apple и Google советуют около 44–48 точек. Между соседними кнопками нужен промежуток.
• Никаких действий только по наведению. Подменю и подсказки должны открываться и по касанию.
• Правильная клавиатура. type="tel", type="email" и атрибут inputmode="numeric" выводят нужную раскладку.
• Жесты с альтернативой. Свайп и щипок удобны, но то же действие должно быть доступно кнопкой.
• Масштаб не запрещать. user-scalable=no в метатеге viewport мешает людям со слабым зрением увеличить страницу — см. жест масштабирования.

Как определить сенсорное устройство в CSS

Ширина экрана не говорит о способе ввода: бывают ноутбуки с сенсорным экраном и планшеты с мышью. Надёжнее спрашивать о возможностях указателя через медиафункции:

/* Основной указатель неточный — палец */
@media (pointer: coarse) {
  .menu a { padding: 12px 16px; }
}

/* Эффект наведения — только там, где наведение есть */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / .15); }
}

Как проверить

Эмуляция устройства в инструментах разработчика показывает раскладку, но не руку. Финальную проверку стоит делать на настоящем телефоне: пройти путь до заявки одной рукой, заполнить форму, закрыть всплывающее окно. Типичные находки — крестик в углу, до которого не дотянуться, и кнопка, закрытая экранной клавиатурой. Размеры целей и состояния без наведения проще заложить ещё на этапе вёрстки по макету.