Реализация логического порядка табуляции — важная часть обеспечения пользователям удобной навигации с помощью клавиатуры. Программы чтения с экрана и другие вспомогательные технологии перемещаются по странице в порядке DOM. Поток информации должен иметь смысл.
Как проверить вручную
Чтобы проверить, является ли порядок табуляции в вашем приложении логичным, попробуйте перемещаться по странице с помощью табуляции. В общем, фокус должен следовать порядку чтения, перемещаясь слева направо, сверху вниз по странице.
При оценке порядка табуляции следует учитывать две основные идеи:
- Расположены ли элементы в DOM в логическом порядке?
- Правильно ли скрыто закадровое содержимое от навигации?
Обратите внимание на любые скачки в навигации, которые кажутся резкими. Также обратите внимание на переходы за пределы экрана, когда нажатие табуляции приводит к содержимому, которое не должно быть видимым.
Дополнительные сведения см. в разделе «Основы доступа с клавиатуры ».
Как исправить
Если порядок фокуса кажется неправильным, вам следует изменить расположение элементов в DOM, чтобы сделать порядок табуляции более естественным.
Если вы использовали CSS для визуального изменения положения элементов, пользователи вспомогательных технологий столкнутся с бессмысленной навигацией. Вместо использования CSS переместите элемент на более раннюю позицию в DOM.
Если закадровый контент по-прежнему доступен для элементов управления с клавиатуры, рассмотрите возможность его удаления с помощью tabindex="-1" .
Дополнительные сведения см. в разделе Управление фокусом с помощью tabindex .
Ресурсы
Исходный код для визуального порядка на странице соответствует аудиту порядка DOM.