Интерактивные элементы управления можно фокусировать с помощью клавиатуры.

Опубликовано: 2 мая 2019 г.

Вручную проверьте, что все пользовательские элементы управления доступны для фокусировки с клавиатуры и отображают индикатор фокуса. Порядок фокусировки элементов должен соответствовать порядку в DOM. Если вы не уверены, какие элементы должны получать фокус, см. модуль «Фокус» в курсе «Изучение доступности» на web.dev.

Как провести тестирование вручную

Чтобы проверить, что пользовательский элемент управления доступен для фокусировки и отображает индикатор фокуса, начните с перемещения по сайту с помощью клавиши Tab. Используйте TAB (или SHIFT + TAB ) для перемещения между элементами управления, а клавиши со стрелками, ENTER и SPACE для изменения их значений (см. также основы работы с клавиатурой ):

Вы можете получить доступ ко всем интерактивным элементам управления на странице? Отображается ли индикатор фокуса на каждом интерактивном элементе управления?

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

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

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

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

Вам также может потребоваться добавить соответствующие роли ARIA к пользовательским элементам управления. См. раздел «Пользовательские элементы управления имеют роли ARIA» .

Если индикатор фокуса не отображается, попробуйте использовать :focus , чтобы он всегда отображался. Независимо от того, используете ли вы мышь или клавиатуру для перехода к фокусу, индикатор фокуса кнопки всегда будет выглядеть одинаково (см. также Стиль фокуса ).

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

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

Узнайте больше о доступности в разделе «Обучение доступности» .

Ресурсы