Вручную убедитесь, что все настраиваемые элементы управления доступны для фокусировки с помощью клавиатуры и отображают индикатор фокуса. Порядок сосредоточения элементов должен соответствовать порядку DOM. Если вы не уверены, какие элементы должны получить фокус, см. раздел «Введение в фокус» .
Как проверить вручную
Чтобы проверить, что пользовательский элемент управления является фокусируемым и отображает индикатор фокуса, начните с перехода по сайту с помощью вкладок. Используйте TAB (или SHIFT + TAB ) для перемещения между элементами управления и используйте клавиши со стрелками, а также ENTER и SPACE для управления их значениями (см. также Основы доступа с клавиатуры ):
Сможете ли вы получить доступ ко всем интерактивным элементам управления на странице? Есть ли индикатор фокуса на каждом интерактивном элементе управления?
Как исправить
Если вы не можете перемещаться по всем элементам на странице, возможно, вам придется использовать tabindex , чтобы улучшить фокусировку этих элементов управления.
Чтобы сделать пользовательский элемент управления фокусируемым, вставьте элемент пользовательского элемента управления в естественный порядок табуляции, используя tabindex="0" (см. также Управление фокусом с помощью tabindex ). Например:
<div tabindex="0">Focus me with the TAB key</div>
Вам также может потребоваться добавить соответствующие роли ARIA в настраиваемые элементы управления. См. раздел Пользовательские элементы управления имеют роли ARIA .
Если вы не видите индикатор фокуса, рассмотрите возможность использования :focus , чтобы индикатор фокуса всегда отображался. Независимо от того, используете ли вы мышь или клавиатуру для перехода к ней, индикатор фокуса кнопки всегда выглядит одинаково (см. также Фокус стиля ).
Почему это важно
Для пользователей, которые не могут или не хотят использовать мышь, навигация с помощью клавиатуры является основным средством доступа ко всему на экране. Удобство работы с клавиатурой зависит от логического порядка табуляции и легко различимых стилей фокусировки. Если пользователь клавиатуры не видит, на чем находится фокус, у него нет возможности взаимодействовать со страницей.
Узнайте больше в разделе «Как провести проверку доступности» .