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

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

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

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

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

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

• Проверка перед подачей страницы на сертификацию 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.

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