Проверка целей нажатия: размер, интервалы и длинные подписи
Небольшие близко расположенные кнопки легко нажать ошибочно, особенно на сенсорном экране. Упражнение проверяет область взаимодействия целиком, а не только размер видимой иконки.
Назначение
Небольшие близко расположенные кнопки легко нажать ошибочно, особенно на сенсорном экране. Упражнение проверяет область взаимодействия целиком, а не только размер видимой иконки.
Как это работает
Внутренние отступы увеличивают кликабельную область нативной кнопки. Gap разделяет соседние действия, а перенос сохраняет место при узком экране. Минимальный размер в примере — проектная настройка, а не заявление о соответствии всем требованиям доступности.
Пример
<style>.touch-actions{display:flex;flex-wrap:wrap;gap:.75rem}.touch-actions button{min-height:2.75rem;min-width:2.75rem;padding:.65rem 1rem;font:inherit}</style>
<div class="touch-actions"><button type="button">Назад</button><button type="button">Продолжить упражнение</button></div>Что должно получиться
Кнопки имеют запас пространства вокруг текста и могут переноситься. Они демонстрационные: нажатия не меняют страницу. Фактические размеры в пикселях зависят от размера корневого шрифта.
Граница применения и частая ошибка
Большая нарисованная иконка не помогает, если обработчик доступен только на маленькой вложенной области. Прозрачные перекрывающиеся элементы способны перехватывать нажатия. Проверка пальцем не заменяет клавиатурную навигацию и видимый фокус.
Самостоятельная проверка
Проверьте кнопки на реальном телефоне, затем увеличьте текст и удлините подписи. Посмотрите границы элементов в DevTools и убедитесь, что области не перекрываются. Отдельно пройдите действия клавишей Tab.