Интерактивные элементы, такие как ссылки и кнопки, должны указывать свое состояние и отличаться от неинтерактивных элементов. Чтобы проверить, что интерактивные элементы указывают свое назначение и состояние, используйте как визуальный тест, так и тест программы чтения с экрана.
Как вручную проверить зрительную фокусировку
Чтобы вручную проверить визуальную фокусировку, пролистывайте страницу с помощью TAB .
- Можете ли вы перейти к каждому интерактивному элементу с помощью табуляции?
- Когда вы доберетесь до интерактивного элемента, есть ли визуальный признак того, что пользователи могут с ним взаимодействовать?
- Изменяется ли внешний вид каждого интерактивного элемента при его выборе?
Существует множество способов стилизации индикаторов фокуса для каждого интерактивного элемента. Один из надежных способов — использовать :focus . Псевдокласс :focus позволяет применить к элементу единый стиль. Этот стиль применяется каждый раз, когда элемент находится в фокусе, независимо от устройства ввода или метода, используемого для его фокусировки.
Узнайте больше в разделе «Фокус стиля» .
Как вручную протестировать с помощью программы чтения с экрана
Используя программу чтения с экрана, перейдите на свою страницу и убедитесь, что программа чтения с экрана может объявить имя каждого интерактивного элемента управления, роль этого элемента управления и текущее интерактивное состояние. Если роль элемента неясна и состояние элемента неясно, возможно, вам придется добавить соответствующие роли ARIA. Дополнительные сведения см. в разделе Пользовательские элементы управления имеют роли ARIA .
Также важно обратить пристальное внимание на то, как маркируются интерактивные элементы. Пользователи программ чтения с экрана и других вспомогательных технологий полагаются на метки, чтобы понять контекст этого элемента. Расплывчатые метки распространены и бесполезны для навигации по контенту. Узнайте, как улучшить ярлыки и текстовые альтернативы .
Почему это важно
Предоставление визуальных подсказок о том, что будет делать элемент управления, помогает людям управлять вашим сайтом и перемещаться по нему. Эти подсказки называются аффордансами. Предоставление возможностей позволяет людям использовать ваш сайт на самых разных устройствах.
Ресурсы
Исходный код интерактивных элементов с указанием их назначения и состояния аудита.