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

Дата публикации: 2 мая 2019 г.

Вручную проверьте, можно ли переходить к элементам управления с помощью клавиатуры и отображается ли индикатор фокуса. Порядок перехода между элементами должен соответствовать порядку DOM. Если вы не знаете, какие элементы должны получать фокус, ознакомьтесь с модулем о фокусе в курсе "Специальные возможности" на сайте web.dev.

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

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

Удалось ли вам воспользоваться всеми интерактивными элементами управления на странице? Есть ли индикатор фокуса на каждом интерактивном элементе управления?

Как устранить проблему

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

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

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

Вам также может потребоваться добавить подходящие роли ARIA к элементам пользовательского элемента управления. Подробнее о ролях ARIA для специальных элементов управления…

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

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

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

Подробнее о специальных возможностях…

Ресурсы