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