Области касаний и веб-доступность
Что такое области касания?
Область касания — это интерактивный элемент на экране, на который пользователь нажимает мышью или касается пальцем. Например, кнопки, ссылки, значки или поля формы имеют области касания, так как с ними можно взаимодействовать.
Важно, чтобы у элементов была достаточно большая область касания для удобного использования. Если эти области слишком малы, они создают значительные сложности в навигации, приводят к случайным нажатиям и разочарованию пользователей. Для всех пользователей маленькие области касания могут сделать сайт неудобным или даже невозможным в использовании.
Важно, чтобы у элементов была достаточно большая область касания для удобного использования. Если эти области слишком малы, они создают значительные сложности в навигации, приводят к случайным нажатиям и разочарованию пользователей. Для всех пользователей маленькие области касания могут сделать сайт неудобным или даже невозможным в использовании.
Кому полезны крупные области касания?
Удобный интерфейс приносит пользу всем. Крупные области касания могут помочь всем пользователям и сделать веб-сайты удобными. Крупные области касания обеспечивают доступность сайтов. Конкретным пользователям, которым крупные области касания могут значительно помочь:
- Пользователи с двигательными нарушениями:Люди с такими состояниями, как болезнь Паркинсона, церебральный паралич или артрит, могут иметь ограниченный контроль мелкой моторики, что затрудняет точное нажатие. Крупные области касания снижают количество ошибок и необходимость в точном нажатии. В результате сайтами становится проще пользоваться.
- Люди с такими состояниями, как болезнь Паркинсона, церебральный паралич или артрит, могут иметь ограниченный контроль мелкой моторики, что затрудняет точное нажатие. Крупные области касания снижают количество ошибок и необходимость в точном нажатии. В результате сайтами становится проще пользоваться.
- Пользователи с нарушениями зрения:Тем, у кого слабое зрение, может быть трудно разглядеть точные границы кнопки. Крупные области касания облегчают поиск и активацию интерактивных элементов.
- Тем, у кого слабое зрение, может быть трудно разглядеть точные границы кнопки. Крупные области касания облегчают поиск и активацию интерактивных элементов.
- Пользователи мобильных устройств:Мобильные экраны малы и создают уникальные проблемы по сравнению с веб-сайтами. Крупные области касания учитывают ситуации, когда поверхность пальца больше цифрового элемента.
- Мобильные экраны малы и создают уникальные проблемы по сравнению с веб-сайтами. Крупные области касания учитывают ситуации, когда поверхность пальца больше цифрового элемента.
- Ситуационные ограничения:Доступность не всегда касается постоянных состояний. Подумайте об использовании телефона в перчатках или в трясущемся автобусе. Крупные области касания обеспечат всем пользователям возможность нажимать на элементы.
- Доступность не всегда касается постоянных состояний. Подумайте об использовании телефона в перчатках или в трясущемся автобусе. Крупные области касания обеспечат всем пользователям возможность нажимать на элементы.
Стандарт WCAG для областей касания
Для обеспечения доступности интерфейса следует проектировать и реализовывать области касания в соответствии с критериями WCAG (Руководства по обеспечению доступности веб-контента). WCAG представляет собой глобальный стандарт цифровой доступности.
- Уровень AA:Размер области касания должен быть не менее 24x24 CSS-пикселей, или между целями должно быть расстояние не менее 24 пикселей.
- Уровень AAA:Не менее 44x44 CSS-пикселей. Более высокий стандарт обеспечивает ещё более комфортное взаимодействие.
Пример на HTML и CSS
Ниже приведён пример обеспечения значка достаточно большой областью касания. Хотя значок мал, сама кнопка соответствует требованиям к размеру. Создан новый стиль icon-style с заданной минимальной шириной и высотой. Этот стиль применён к значку для обеспечения достаточной области касания.
HTML:
