Визуализатор порядка фокуса

Что такое Визуализатор порядка фокуса?

Этот визуализатор порядка фокуса помогает специалистам по доступности и разработчикам увидеть порядок табуляции на HTML-странице. Вставьте HTML-код или введите исходный код страницы — инструмент отобразит пронумерованные маркеры на каждом фокусируемом элементе, показывая точную последовательность табуляции и позволяя легко обнаружить проблемы навигации.

Как использовать

1. Вставьте HTML-код в редактор или загрузите HTML-файл, который хотите проанализировать на порядок табуляции.
2. На отрендеренной странице появятся пронумерованные маркеры, показывающие последовательность табуляции для каждого фокусируемого элемента (ссылки, кнопки, поля ввода и т.д.).
3. Просмотрите список порядка фокуса, выявите элементы с нарушенным порядком или пропущенные элементы, затем экспортируйте анализ в виде отчёта.

Результат

Консультант по доступности вставляет HTML формы регистрации клиента. Визуализатор показывает, что кнопка «Отправить» получает фокус раньше чекбокса «Условия использования» из-за некорректных значений tabindex — нарушение WCAG 2.4.3.

Похожие инструменты