Проверить состояние клавиатурного фокуса можно, записав экран и пройдя страницу клавишами Tab и Shift+Tab. На видео видно, какой элемент активен, не пропускаются ли ссылки и кнопки, сохраняется ли логичный порядок переходов. Такой тест помогает обнаружить барьеры при проверке доступности сайта, но не заменяет полноценный аудит и проверку вспомогательными технологиями.
Что фиксировать при проверке клавиатурного фокуса
- Какой элемент получает фокус первым и в каком порядке обходятся остальные.
- Виден ли индикатор фокуса на каждом активном элементе.
- Не пропускает ли навигация важные ссылки, кнопки и поля.
- Можно ли открыть и закрыть меню, формы и диалоговые окна без мыши.
- Возвращается ли фокус в ожидаемое место после закрытия окна или завершения действия.
- На каком шаге возникла проблема и как её повторить.
Подготовьте страницу и включите запись экрана
Проверка подходит для первичного тестирования сайта на доступность, повторной проверки исправлений и документирования дефектов для команды. Не проводите тест на странице с реальными персональными данными или действиями, которые могут привести к отправке формы, покупке или изменению важных настроек.
Откройте нужную страницу в браузере, задайте удобный масштаб и убедитесь, что экранная запись не захватывает конфиденциальную информацию. Запись экрана нужна для разбора последовательности переходов; если записывать нельзя, фиксируйте наблюдения текстом.
Пройдите сайт клавишей Tab от первого элемента
Понадобятся клавиатура, браузер и доступ к проверяемой странице. Установите фокус в начале страницы: например, щёлкните адресную строку браузера, затем вернитесь на страницу и начните проверку с её начала. Сочетания клавиш для перехода к странице могут различаться, поэтому проверьте, что первое нажатие Tab переводит фокус на ожидаемый элемент.
Нажимайте Tab по одному разу и наблюдайте за подсветкой. Не нажимайте на кнопки и не отправляйте формы: на этом этапе важно проверить маршрут, а не выполнять действия на сайте.
Проверьте обратный маршрут с помощью Shift+Tab
- Дойдите до заметного ориентира. Нажимайте Tab, пока фокус не окажется на ссылке, кнопке или поле, расположенном ближе к концу проверяемого участка. Запомните этот элемент и его положение.
- Начните обратный проход. Нажимайте Shift+Tab по одному разу. Убедитесь, что фокус перемещается по предыдущим элементам, а не исчезает и не перескакивает в неожиданное место.
- Сравните последовательность. Сверьте обратный маршрут с тем, который вы прошли клавишей Tab. Отклонения запишите с названием элемента и моментом на видео.
- Зафиксируйте границы участка. Проверьте, куда попадает фокус до первого и после последнего элемента выбранной области. Если он уходит за пределы страницы или застревает, отметьте это как отдельное наблюдение.
Быстрый режим
- Откройте страницу без конфиденциальных данных и включите запись.
- Пройдите нужный участок клавишей Tab.
- Вернитесь по элементам с помощью Shift+Tab.
- Отметьте пропуски, невидимый фокус и неожиданные переходы.
Оцените видимость фокуса на каждом шаге
- Текущий элемент различим без угадывания по изменению содержимого страницы.
- Индикатор фокуса не скрыт другими элементами и не обрезан краем области просмотра.
- Подсветка заметна на фоне страницы и сохраняется при переходе между элементами.
- Фокус перемещается в понятном порядке, соответствующем расположению и смыслу элементов.
- Активный элемент не закрыт фиксированной шапкой, всплывающей панелью или другим содержимым.
- После перехода на другую часть страницы можно определить, где находится фокус.
- Запись позволяет различить активный элемент и прочие элементы интерфейса.
Если подсветка слабо заметна на видео, проверьте страницу в браузере напрямую: качество записи или масштаб могут затруднять оценку. Не делайте вывод только по ролику, если состояние фокуса на экране видно иначе.
Проверьте меню, формы и диалоговые окна
- Меню нельзя открыть с клавиатуры или после открытия фокус не попадает к его пунктам.
- При закрытии меню фокус теряется или оказывается в неожиданной части страницы.
- У поля формы нет понятной подписи либо переход через поля идёт в нелогичном порядке.
- Кнопки отправки, раскрытия и отмены недоступны при навигации с клавиатуры.
- В диалоговом окне фокус остаётся позади окна или уходит на фоновые элементы.
- После закрытия диалога фокус не возвращается к элементу, который его открыл.
- Внутри раскрытого компонента невозможно перейти к доступным действиям или выйти из него ожидаемым способом.
Не активируйте элементы, если действие может отправить данные или изменить состояние аккаунта. Для интерактивных компонентов используйте безопасную тестовую среду или заранее подготовленный тестовый сценарий.
Сверьте запись с ожидаемым порядком навигации
Просмотрите видео и сопоставьте переходы с назначением элементов на странице. Для аудита доступности сайта полезно приложить к замечанию адрес страницы, браузер, последовательность клавиш, ожидаемое и фактическое поведение. При необходимости выберите подходящий способ дополнительной проверки:
- Повторить маршрут без записи. Уместно, если видео не позволяет уверенно определить активный элемент.
- Проверить отдельный компонент. Используйте этот вариант, если проблема возникает только в меню, форме или диалоге.
- Дополнить ручной тест автоматизированной проверкой. Это помогает найти другие типы нарушений, но не подтверждает удобство клавиатурной навигации само по себе.
- Передать задачу специалисту. Услуги аудита сайта на доступность уместны, если нужны системная оценка, проверка разных сценариев и рекомендации по исправлению.
Результат проверки сайта для людей с ограниченными возможностями фиксируйте как воспроизводимый дефект: укажите шаги, ожидаемое поведение и фактический результат. Так разработчику проще повторить проблему и проверить исправление.
Нюансы проверки фокуса, которые часто упускают
Нужно ли начинать запись до открытия страницы?
Запись достаточно включить перед началом проверки, если состояние страницы уже подготовлено. Не захватывайте личные данные, уведомления и другие сведения, не относящиеся к тесту.
Что делать, если индикатор фокуса не виден на видео?
Проверьте страницу в браузере напрямую и повторите запись с подходящим масштабом. Если фокус неразличим и при непосредственном просмотре, зафиксируйте это как возможную проблему видимости.
Можно ли использовать мышь между нажатиями Tab?
Для чистого маршрута лучше не менять положение фокуса мышью во время прохода. Если мышь понадобилась для подготовки, начните последовательность заново и отметьте её начальную точку.
Достаточно ли проверки только клавишами Tab и Shift+Tab?
Нет, она показывает базовую последовательность фокуса, но не проверяет все сценарии и типы доступности. Для раскрывающихся компонентов могут понадобиться дополнительные клавиши согласно их поведению.
Как проверить элемент, который может отправить форму?
Не активируйте его на рабочем сайте, если результат неизвестен. Используйте тестовую среду или остановитесь на фиксации того, что элемент доступен по клавиатуре и имеет видимый фокус.
Что приложить к сообщению о проблеме?
Укажите страницу, браузер, шаги воспроизведения и ожидаемое поведение. Короткий фрагмент записи прикладывайте только в том случае, если он не содержит конфиденциальных данных.