Сенсорная проверка целевого размера
Проверьте, соответствуют ли ваши элементы пользовательского интерфейса требованиям целевого размера WCAG 2.5.8 (минимум 24×24 CSS-пикселя). Введите размеры элемента, отступы и значения полей, чтобы рассчитать эффективную целевую область касания и получить мгновенный результат «годен/не годен» с подробными инструкциями и визуальным предварительным просмотром. Полностью конфиденциальный, 100% бесплатный и не требующий регистрации.
Quick Select
Element Dimensions
Padding
Margin / Spacing
Pass - Meets WCAG 2.5.8
Effective target area: 56 × 48px
The effective touch target size is 56×48px, which meets the WCAG 2.5.8 minimum of 24×24px. Consider adding at least 4px spacing around this target for better usability.
Visual Preview
Зачем использовать нашу программу проверки размера сенсорной цели?
- Мгновенная проверка соответствия WCAG 2.5.8. Средство проверки целевого размера Touch оценивает размеры, отступы и поля вашего элемента на соответствие требованиям WCAG 2.5.8 (минимум 24×24 CSS-пикселя) в режиме реального времени. Отрегулируйте любое значение и мгновенно увидите обновление результатов с четким статусом «пройдено/не пройдено».
- Визуальный предварительный просмотр цели: просмотрите визуальное представление сенсорной цели с зонами с цветовой кодировкой: область содержимого (индиго), эффективная область нажатия, включая отступы (зеленый/янтарный/красный), расстояние между полями (синий пунктир) и минимальное наложение × px WCAG для быстрого ознакомления.
- 100% конфиденциальность — без загрузки: все расчеты происходят локально в вашем браузере. Ваши проектные данные никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это безопасно для клиентских проектов, систем проектирования и собственных проверок доступности.
- Бесплатно и без ограничений: проверяйте неограниченное количество конфигураций элементов без регистрации, подписки и ограничений на использование. Программа Touch Target Size Checker бесплатна навсегда, и никакая реклама не блокирует интерфейс.
Распространенные случаи использования средства проверки размера сенсорного объекта
- Аудит пользовательского интерфейса мобильного приложения. Мобильные дизайнеры используют Touch Target Size Checker для проверки каждого интерактивного элемента — кнопок, ссылок, значков — на соответствие WCAG 2.5.8. Обеспечение размера всех сенсорных объектов не менее 24×24 пикселей повышает удобство использования для пользователей с нарушениями моторики и уменьшает количество случайных нажатий.
- Проверка соответствия специальным возможностям. Специалисты по специальным возможностям используют средство проверки размера сенсорной цели во время аудита соответствия WCAG. Инструмент предоставляет подробные объяснения результатов «пройдено/не пройдено», что позволяет легко документировать результаты доступности и рекомендовать конкретные корректировки параметров.
- Аудит компонентов системы дизайна. Специалисты по обслуживанию системы дизайна используют средство проверки целевого размера Touch для проверки того, что все интерактивные компоненты — кнопки, переключатели, чипы, значки — соответствуют минимальным требованиям к целевому размеру перед отправкой командам разработчиков.
- Проверка адаптивного дизайна: разработчики используют средство проверки размера сенсорной цели, чтобы убедиться, что сенсорные цели остаются достаточно большими во всех точках останова реагирования. Элементы, большие на настольном компьютере, могут стать слишком маленькими на мобильных устройствах, и этот инструмент помогает выявить эти проблемы на ранней стадии.
- Доступность форм и полей ввода: дизайнеры форм используют средство проверки размера сенсорного объекта, чтобы гарантировать, что поля ввода, флажки, переключатели и кнопки отправки имеют достаточные целевые области сенсорного ввода. Маленькие элементы управления формой являются распространенным барьером доступности, который помогает выявить этот инструмент.
- Удобство навигации и меню. Дизайнеры навигации используют средство проверки размера сенсорного объекта для проверки пунктов меню, значков-гамбургеров, навигационных ссылок и элементов вкладок. Маленькие цели навигации — одна из наиболее частых ошибок WCAG 2.5.8 в современном веб-дизайне.
Что такое размер сенсорной цели WCAG 2.5.8?
WCAG 2.5.8 Целевой размер (минимальный) — это руководство по доступности веб-контента, которое требует, чтобы размер интерактивных целевых объектов был не менее × CSS пикселей. Это гарантирует, что пользователи с двигательными нарушениями, пониженной ловкостью или те, кто использует сенсорные интерфейсы на мобильных устройствах, смогут точно нажимать или щелкать интерактивные элементы, не случайно активируя соседние цели.
Как работает наша программа проверки размера сенсорной цели
- Введите размеры элемента: укажите ширину и высоту содержимого вашего элемента пользовательского интерфейса (видимая область содержимого, не включая отступы). Затем введите значения заполнения — область заполнения доступна для щелчков и учитывается при расчете эффективного целевого размера.
- Добавить поля/интервалы (необязательно): введите значения полей, чтобы проверить исключение интервалов WCAG 2.5.8. Если расстояние между соседними целями составляет не менее пикселя, цели могут быть меньше × пикселей и все равно пройти.
- Просмотрите результаты: инструмент вычисляет эффективную целевую область касания (элемент + отступ), сравнивает ее с минимумом × пикселей и предоставляет четкий результат «прошел/не прошел/условно» с подробными рекомендациями по улучшению.
Объяснение эффективной целевой области
- Область содержимого: видимое содержимое элемента (текст, значок или изображение). Обычно это наименьшая часть кликабельной области, не имеющая каких-либо отступов.
- Эффективная кликабельная область: область содержимого плюс все отступы. Это фактическая цель касания/клика, с которой взаимодействуют пользователи. Для соответствия требованиям WCAG 2.5.8 эффективная площадь должна быть не менее × × пикселей.
- Маржа/интервал: пространство между этой целью и соседними целями. Хотя поле само по себе не является кликабельным, достаточное расстояние (px+) между небольшими объектами может удовлетворять исключению WCAG 2.5.8.
- Визуальная и интерактивная область: во многих средах CSS в интерактивную область включены отступы, но фоновый клип может привести к тому, что она будет выглядеть по-другому. Инструмент всегда предполагает, что отступы доступны для кликов, что соответствует поведению браузера.
WCAG 2.5.8 Исключения и правило интервалов
Исключение расстояния: если цель меньше × пикселей, она все равно может пройти WCAG 2.5.8, если между ней и соседними целями со всех сторон есть расстояние не менее пикселей. Это исключение признает, что хорошо расположенные небольшие цели легче точно поразить, чем плотно расположенные.
Важные ограничения. Исключение интервалов не применяется к встроенным целевым объектам (например, ссылкам внутри абзаца), поскольку расстояние между строками текста не обеспечивает такого же преимущества удобства использования. Стандарт также требует, чтобы расстояние было постоянным: случайные расстояния только вокруг некоторых сторон недостаточны для соответствия критериям исключения.
Часто задаваемые вопросы
WCAG 2.5.8 (Минимальный целевой размер) — это критерий успеха уровня AA, который требует, чтобы интерактивные элементы пользовательского интерфейса имели целевую область размером не менее 24 × 24 пикселей CSS. Это гарантирует, что объекты касания и щелчка будут достаточно большими для пользователей с ограниченными возможностями моторики, пользователей мобильных устройств и всех, кто использует сенсорный ввод или ввод с помощью указателя. Требование распространяется на все интерактивные элементы: кнопки, ссылки, элементы управления формами и пользовательские интерактивные компоненты.
Эффективный целевой размер сенсорного экрана рассчитывается путем добавления размеров содержимого элемента к его отступам. Формула такова: эффективная ширина = ширина элемента + отступ слева + отступ справа и эффективная высота = высота элемента + отступ сверху + отступ снизу. Поля и расстояние между элементами НЕ учитываются при определении целевого размера, но они влияют на то, проходит ли элемент условную проверку «достаточного интервала» — если целевой размер немного меньше 24×24 пикселей, но имеет расстояние не менее 4 пикселей с каждой стороны, он все равно может пройти условно.
Нет. Поля/интервал НЕ учитываются при расчете эффективного размера сенсорной цели. Целью касания считается только область содержимого элемента плюс отступы. Однако исключение WCAG 2.5.8 допускает цели размером менее 24×24 пикселей, если вокруг цели со всех сторон имеется достаточное расстояние не менее 4 пикселей. Средство проверки размера сенсорной цели оценивает оба условия: соответствует ли цель минимальному размеру 24×24 пикселей и проходит ли она условно с интервалом.
Да. WCAG 2.5.8 определяет несколько исключений: (1) Эквивалентная цель — доступна другая цель с той же функцией, которая соответствует требованию на той же странице. (2) Встроенный — цель находится внутри предложения или строки текста, размер которой определяется текстом. (3) Элемент управления пользовательским агентом — целевой размер определяется пользовательским агентом (элементы управления браузера по умолчанию). (4) Существенный – конкретное представление цели важно для передаваемой информации. Средство проверки целевого размера Touch поможет вам оценить основные требования к размеру и предоставит рекомендации по устранению этих исключений.
Условный проход означает, что сам целевой элемент меньше 24×24 пикселей, но имеет интервал не менее 4 пикселей с каждой стороны, что удовлетворяет исключению интервалов WCAG 2.5.8. Условно передаваемый элемент отображает янтарное предупреждение, указывающее, что, хотя он соответствует текущим требованиям, рекомендуется по возможности увеличить целевой размер для повышения удобства использования. В будущих версиях WCAG эти требования могут ужесточаться, поэтому лучше всего проектировать с размером минимум 24×24 пикселя.
Да. Программа Touch Target Size Checker абсолютно бесплатна, не требует регистрации, не имеет дополнительных функций и ограничений на использование. Проверяйте неограниченное количество конфигураций элементов пользовательского интерфейса без каких-либо ограничений или скрытых затрат. Нет рекламы, блокирующей интерфейс.
Да. Хотя стандарт WCAG 2.5.8 использует пиксели CSS, которые хорошо подходят для веб-разработки, основополагающий принцип минимального целевого размера 9–10 мм применим ко всем платформам. Для мобильных приложений HIG Apple рекомендует размер сенсорных объектов не менее 44×44pt, а Material Design Google рекомендует не менее 48×48dp. Средство проверки целевого размера Touch можно использовать в качестве эталона для любой платформы путем преобразования единиц измерения, специфичных для платформы, в пиксели CSS.
Да. Целевые объекты касания, соответствующие WCAG 2.5.8 для размера настольного компьютера, могут стать слишком маленькими на мобильных устройствах или при перекомпоновке элементов. Рекомендуется тестировать свой пользовательский интерфейс при нескольких размерах области просмотра, особенно при минимальной поддерживаемой ширине. Средство проверки сенсорного целевого размера помогает, показывая как эффективный целевой размер, так и визуальный предварительный просмотр — вы можете ввести наименьшие ожидаемые размеры и проверить соответствие вашим адаптивным контрольным точкам.