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

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

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

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

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

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

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

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

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

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

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

Узнайте больше в разделе Управление фокусом с помощью tabindex .

Ресурсы

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