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

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

Визуализатор находит ссылки, кнопки, поля форм, textarea, выпадающие списки, элементы details/summary, contenteditable-области и всё, у чего явно задан tabindex. У каждого фокусируемого элемента появляется нумерованный значок и метка: пришла ли позиция из порядка DOM (естественная) или её переопределил tabindex (пользовательская). Ещё он выставляет странице оценку по 100-балльной шкале, отмечает элементы без доступного имени (проблема кнопки с одной иконкой) и показывает, сколько интерактивных элементов вообще недостижимы по Tab. Результаты выгружаются как текстовый отчёт или как структурированный CSV для аудита и баг-трекеров.

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

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

Когда использовать

• Проверка перед подачей страницы на сертификацию WCAG 2.1 AA.
• Поиск регрессии порядка Tab после рефакторинга макета или компонента.
• Проверка, что модальное окно или офф-канвас удерживает фокус внутри.

Результат

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

Частые вопросы

Положительный tabindex это всегда ошибка?

Почти всегда да. Положительный tabindex (1, 2, 3…) вытаскивает элемент из порядка DOM и заставляет курсор прыгать по странице непредсказуемо. Используйте tabindex="0", чтобы сделать неинтерактивный элемент фокусируемым, или tabindex="-1", чтобы убрать из цепочки Tab, оставив программный фокус.

Что значат «естественный» и «пользовательский» в списке?

Естественный значит, что позиция Tab берётся из расположения элемента в исходном HTML. Пользовательский значит, что положительный tabindex переставил его в другое место. Пользовательские позиции помечаются, поскольку чаще всего именно они дают сбой WCAG 2.4.3.

Попадают ли скрытые элементы в порядок фокуса?

Если элементы реально скрыты (display:none или visibility:hidden), браузер их пропускает, и визуализатор тоже. А вот aria-hidden сам по себе не убирает фокусируемость, и это распространённый баг. Такие элементы будут в списке, и по данным прямоугольника видно, видимы ли они.

Заметит ли инструмент отсутствие удержания фокуса в модалке?

Он показывает порядок, а не то, утекает ли фокус из модального окна. Вставьте HTML открытой модалки и посмотрите, лежат ли первый и последний фокусируемые элементы внутри диалога. Если порядок прыгает к контенту body — удержание не реализовано.

Почему элемент, который я ожидал фокусируемым, отсутствует?

Отключённые input, anchor без href и div без tabindex пропускаются, потому что браузер их не фокусирует. Добавьте tabindex="0", если div должен быть достижим, проставьте href в anchor или уберите атрибут disabled.

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