Пользовательские элементы управления имеют связанные метки

Пользовательские интерактивные элементы управления должны быть фокусируемыми. Например, если вы используете JavaScript, чтобы превратить <div> в необычный раскрывающийся список, этот раскрывающийся список не будет автоматически вставлен в правильный порядок табуляции.

Вам необходимо вручную проверить, что все пользовательские элементы управления доступны для фокусировки с помощью клавиатуры .

По возможности используйте семантические элементы HTML , обеспечивающие взаимодействие.

Как протестировать

Чтобы проверить, что пользовательский элемент управления является фокусируемым, нажмите клавишу TAB для навигации по сайту:

Сможете ли вы получить доступ ко всем интерактивным элементам управления на странице? Если нет, возможно, вам придется использовать tabindex , чтобы улучшить фокусировку этих элементов управления. См. также Управление фокусом с помощью tabindex .

Как исправить

Чтобы сделать пользовательский элемент управления фокусируемым, вставьте пользовательский элемент управления в естественный порядок табуляции, используя tabindex="0" . Например:

<div tabindex="0">Focus me with the TAB key</div>

Почему это важно

Для пользователей, которые не могут или не хотят использовать мышь, навигация с помощью клавиатуры является основным средством доступа ко всему на экране. Удобство работы с клавиатурой зависит от логического порядка табуляции и различимых стилей фокусировки. Если пользователь клавиатуры не видит, на чем находится фокус, у него нет возможности взаимодействовать со страницей.

Если вы новичок в тестировании доступности, мы рекомендуем узнать о ручном тестировании доступности и тестировании вспомогательных технологий .

Ресурсы