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