Визуальный порядок на странице соответствует порядку DOM.

Реализация логического порядка табуляции — важная часть обеспечения пользователям удобной навигации с помощью клавиатуры. Программы чтения с экрана и другие вспомогательные технологии перемещаются по странице в порядке DOM. Поток информации должен иметь смысл.

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

При оценке порядка табуляции следует учитывать две основные идеи:

  • Расположены ли элементы в DOM в логическом порядке?
  • Правильно ли скрыто закадровое содержимое от навигации?

Обратите внимание на любые скачки в навигации, которые кажутся резкими. Также обратите внимание на переходы за пределы экрана, когда нажатие табуляции приводит к содержимому, которое не должно быть видимым.

Дополнительные сведения см. в разделе «Основы доступа с клавиатуры ».

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

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

Если вы использовали CSS для визуального изменения положения элементов, пользователи вспомогательных технологий столкнутся с бессмысленной навигацией. Вместо использования CSS переместите элемент на более раннюю позицию в DOM.

Если закадровый контент по-прежнему доступен для элементов управления с клавиатуры, рассмотрите возможность его удаления с помощью tabindex="-1" .

Дополнительные сведения см. в разделе Управление фокусом с помощью tabindex .

Ресурсы

Исходный код для визуального порядка на странице соответствует аудиту порядка DOM.