Пользовательские интерактивные элементы управления должны быть фокусируемыми. Например, если вы используете JavaScript, чтобы превратить <div>
в необычный раскрывающийся список, этот раскрывающийся список не будет автоматически вставлен в правильный порядок табуляции.
Вам необходимо вручную проверить, что все пользовательские элементы управления доступны для фокусировки с помощью клавиатуры .
По возможности используйте семантические элементы HTML , обеспечивающие взаимодействие.
Как протестировать
Чтобы проверить, что пользовательский элемент управления является фокусируемым, нажмите клавишу TAB
для навигации по сайту:
Сможете ли вы получить доступ ко всем интерактивным элементам управления на странице? Если нет, возможно, вам придется использовать tabindex
, чтобы улучшить фокусировку этих элементов управления. См. также Управление фокусом с помощью tabindex .
Как исправить
Чтобы сделать пользовательский элемент управления фокусируемым, вставьте пользовательский элемент управления в естественный порядок табуляции, используя tabindex="0"
. Например:
<div tabindex="0">Focus me with the TAB key</div>
Почему это важно
Для пользователей, которые не могут или не хотят использовать мышь, навигация с помощью клавиатуры является основным средством доступа ко всему на экране. Удобство работы с клавиатурой зависит от логического порядка табуляции и различимых стилей фокусировки. Если пользователь клавиатуры не видит, на чем находится фокус, у него нет возможности взаимодействовать со страницей.
Если вы новичок в тестировании доступности, мы рекомендуем узнать о ручном тестировании доступности и тестировании вспомогательных технологий .