Минимальные размеры кнопок и ссылок для доступного управления

Кнопка или ссылка, в которую сложно попасть пальцем или курсором, — одна из самых частых проблем доступности интерфейсов. Главный ориентир такой: минимальная область нажатия для интерактивных элементов должна быть не меньше 24×24 CSS-пикселя по требованию WCAG 2.2, а на мобильных устройствах целевой размер комфортнее держать в районе 44–48 пикселей. В этой статье разберём, откуда берутся эти цифры, чем отличаются требования разных стандартов и как проверить свой интерфейс без специального оборудования.

Почему размер зоны нажатия влияет на доступность

Интерактивный элемент может быть визуально маленьким, но при этом иметь большую невидимую область клика. Именно эта область — цель нажатия (target) — определяет, попадёт ли пользователь в элемент с первого раза. Если цель слишком мала, возникают три типичные проблемы:

• пользователь промахивается и активирует соседний элемент — например, вместо «Удалить» нажимает «Редактировать»;
• требуется несколько попыток, что утомляет и замедляет работу;
• на тачскринах палец закрывает саму кнопку, и пользователь не видит результат нажатия.

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

Что говорят стандарты и рекомендации платформ

Единого «закона» о размере кнопок нет, но есть несколько авторитетных ориентиров, которые часто путают между собой. Важно понимать их различие.

Источник	Рекомендуемый минимум	Характер требования
WCAG 2.2, критерий 2.5.8 Target Size (Minimum)	24×24 CSS-пикселя	Формальный критерий соответствия уровню AA
Apple Human Interface Guidelines	Около 44×44 пунктов	Платформенная рекомендация для iOS
Google Material Design	Около 48×48 dp	Платформенная рекомендация для Android
Исследования удобства касаний	Часто называют 42–48 пикселей как комфортную зону	Эмпирический ориентир, не норма

Ключевое различие: 24×24 пикселя — это минимум допустимого, ниже которого интерфейс формально не соответствует WCAG 2.2 уровня AA. А 44–48 пикселей — это комфортный размер, при котором промахи редки даже для пользователей с ограниченной моторикой. Проектировать «впритык к стандарту» законно, но на практике лучше стремиться к большему значению.

Что именно требует WCAG 2.2

Критерий Target Size (Minimum) говорит: каждая цель нажатия должна быть не менее 24×24 CSS-пикселя, либо соседние цели должны иметь достаточный отступ друг от друга. Из этого следует важное уточнение: маленькая кнопка допустима, если вокруг неё достаточно свободного пространства. Например, иконка 20×20 пикселей с отступами так, чтобы суммарная зона со соседними целями укладывалась в правило, может пройти проверку. Точнее говоря, расстояние между границами целей компенсирует недостаток размера.

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

Разница между видимым размером и зоной нажатия

Это самый частый источник ошибок. Визуальная кнопка может занимать 16×16 пикселей, но если разработчик расширил область клика через внутренние отступы прозрачной обёртки, фактическая цель нажатия будет больше. Для доступности оценивается именно фактическая интерактивная область, а не то, что видно глазу. Обратная ситуация тоже возможна: крупная на вид картинка-кнопка, у которой кликабельна только маленькая центральная часть, — плохой вариант, потому что пользователь ожидает, что нажмёт туда, куда смотрит.

Практические ориентиры для разных элементов

Требования к размеру зависят от типа элемента и контекста его использования.

• Основные кнопки действий («Отправить», «Купить», «Продолжить») — делайте не меньше 44–48 пикселей по высоте на мобильных устройствах. Это ключевые действия, и промах по ним стоит дороже всего.
• Второстепенные иконки-кнопки (закрыть, поделиться, настройки) — минимально 24×24 пикселя видимой области, но зону нажатия расширяйте до 40+ пикселей за счёт прозрачных отступов.
• Ссылки в тексте — формально исключены из критерия WCAG, но выделяйте их не только цветом: подчёркивание помогает опознать ссылку, а достаточные межстрочные интервалы снижают вероятность промаха по соседней ссылке.
• Ссылки-списки (меню, навигация) — каждая строка должна быть полноценной целью нажатия высотой от 44 пикселей на тачскринах, включая отступы, а не только текст.
• Чекбоксы и радиокнопки — кликабельной делайте всю подпись вместе с полем, а не только квадратик 14×14 пикселей.
• Элементы управления видео и слайдерами — мелкие иконки плеера традиционно проблемная зона; объединяйте их в панель с достаточными отступами.

Отступы между целями нажатия

Размер — только половина уравнения. Вторая половина — расстояние между соседними интерактивными элементами. Две кнопки по 30 пикселей, стоящие вплотную, опаснее двух кнопок по 24 пикселя с отступом в 12 пикселей: во втором случае промах просто не попадёт никуда, в первом — попадёт в соседнее действие.

Логика простая: чем меньше цель, тем больше нужен отступ вокруг неё. Если вы вынуждены использовать компактные элементы (плотные таблицы данных, панели инструментов), компенсируйте это увеличенными промежутками. И наоборот: крупные кнопки в мобильном меню всё равно требуют разделения, чтобы случайное скольжение пальца не активировало два пункта подряд.

Адаптивность и разные устройства

Размер цели нажатия нужно рассматривать отдельно для мыши и для касания. Курсором попасть в элемент 16×16 пикселей вполне реально, пальцем — заметно труднее. Отсюда практическое правило:

• определяйте тип ввода через медиазапросы взаимодействия (pointer: coarse для касания, pointer: fine для точного указателя);
• на устройствах с касанием увеличивайте отступы и высоту строк меню, списков, табов;
• не полагайтесь только на hover-состояния: на тачскринах наведения нет, и скрытые за ним действия должны быть доступны другим способом;
• учитывайте масштабирование: если пользователь увеличил шрифт до 200%, кнопки с фиксированной высотой в пикселях могут «сломаться» — используйте относительные единицы там, где это возможно.

Также помните про режим увеличения экрана и лупу: при сильном увеличении поля зрения сужается, и рядом оказываются только мелкие фрагменты интерфейса. Компактные группы кнопок в таком режиме превращаются в минное поле.

Типичные ошибки и как их исправить

• Иконка без подписи и без зоны нажатия. Иконка 18×18 пикселей, кликабельная ровно по своей площади. Исправление: оставить визуальный размер, но расширить область клика прозрачными отступами до 44 пикселей и добавить текстовую альтернативу для скринридеров.
• Крестик закрытия модального окна в углу экрана. Он стоит у самой границы, куда палец частично выходит за пределы экрана. Исправление: увеличить зону нажатия и продублировать закрытие по клику на подложку и клавишей Esc.
• Ссылки в абзаце, разделённые одним пробелом. Две соседние ссылки почти невозможно различить при касании. Исправление: переформулировать текст, чтобы ссылки не стояли вплотную, либо оформить их как отдельные элементы списка.
• Кастомные чекбоксы меньшего размера, чем нативные. Стилизация уменьшает поле до 12–14 пикселей. Исправление: растянуть кликабельную область на весь элемент формы вместе с подписью.
• Пагинация из цифр 10×10 пикселей. Классическая проблема каталогов. Исправление: сделать каждую цифру кнопкой минимум 32–40 пикселей с отступами.
• Свайп-действия без дублирования. Действия, доступные только жестом (удалить свайпом), недоступны людям с ограниченной моторикой. Исправление: предусмотреть альтернативу кнопкой в меню.

Как проверить интерфейс самостоятельно

Для базовой проверки размеров не нужны сложные инструменты — достаточно инструментов разработчика в браузере.

1. Откройте страницу в режиме эмуляции мобильного устройства и включите отображение размеров элементов.
2. Выберите каждый интерактивный элемент и посмотрите его итоговый bounding box — фактическую область клика, включая отступы.
3. Сверьте значения с ориентиром: минимум 24×24 CSS-пикселя, комфорт — 44–48.
4. Измерьте расстояние между границами соседних целей нажатия.
5. Пройдитесь по странице на реальном телефоне большим пальцем ведущей руки: отмечайте места, где приходится целиться второй рукой или замедляться.
6. Проверьте поведение при увеличении системного шрифта и масштаба страницы до 200%.

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

Когда строгий минимум оправдан, а когда нет

Бывают ситуации, где выдержать 44 пикселя сложно: плотные редакторы таблиц, профессиональные панели инструментов, календари с сеткой дней. Здесь работает принцип соразмерности риска:

• если ошибочное нажатие приводит к необратимым последствиям (удаление, оплата, отправка), размер и отступы должны быть щедрыми, а само действие — защищено подтверждением;
• если элемент используется часто и быстро (панель форматирования текста), компактность допустима, но с увеличенными отступами и с поддержкой работы с клавиатуры;
• если интерфейсом пользуются преимущественно мышью на десктопе, требования мягче, однако не забывайте про пользователей с тремором и про адаптивную версию, которая неизбежно появится на телефоне.

Что делать дальше

Начните с аудита самых критичных сценариев: регистрация, оформление заказа, основные действия в вашем продукте. Проверьте фактические зоны нажатия ключевых кнопок и расстояния между ними, исправьте худшие случаи — обычно это крестик закрытия, иконки в шапке и пагинация. Затем закрепите размеры в дизайн-системе: единые токены для минимальной высоты кнопок и отступов избавят от повторения проблемы в новых экранах. Ориентируйтесь не на нижнюю границу стандарта, а на комфортные 44–48 пикселей для всего, что нажимается пальцем, — это дешевле, чем кажется, и заметно улучшает опыт всех пользователей.

Материал носит информационный характер и описывает общие рекомендации по доступности интерфейсов. Конкретные требования к вашему проекту зависят от применимых стандартов, законодательства и аудитории — при существенных решениях сверяйтесь с актуальными версиями WCAG и профильными специалистами по доступности.