Как проверить доступность сайта с клавиатуры: фокус, меню и формы

Проверьте сайт без мыши: пройдите меню и форму с клавиатуры, проследите видимый фокус и выход из окон. Работа с мышью не подтверждает доступность управления.

Что должно получиться

Посетитель может добраться до нужного действия, выполнить его и продолжить работу, пользуясь клавиатурой. При этом понятно, какой элемент сейчас активен для ввода: виден фокус. После открытия окна или сообщения человек не оказывается в месте, из которого нельзя выйти без мыши.

Для первой проверки выберите обычный путь: открыть меню, перейти в раздел, заполнить тестовую форму и исправить ошибку. В результате нужен список конкретных препятствий с адресами и шагами. Формулировка «кнопка недоступна» полезна только вместе с объяснением, на каком этапе до неё не удалось добраться.

Клавиатурная проверка дополняет просмотр на телефоне и оценку внешнего вида. Контрастная кнопка может не получать фокус, а элемент с рабочим щелчком — не реагировать на клавиатуру. Проверяйте способ управления отдельно от того, насколько аккуратно всё выглядит.

Из чего это складывается

Подготовьте одинаковые условия

Запишите браузер, систему и настройки клавиатурной навигации. На разных платформах охват элементов при переходе клавишей Tab может зависеть от настроек. Если ссылка пропускается только в одной среде, сначала уточните условия, а затем делайте вывод о коде сайта.

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

Как это сделать по шагам

1. Определите проверяемое действие. Запишите адрес и исходное состояние страницы. Для формы подготовьте согласованный тестовый режим, чтобы проверка не создавала настоящие обращения.
2. Отложите мышь. Переведите фокус в документ обычным способом своего браузера. Дальше проходите сценарий клавиатурой, не помогая себе щелчками в трудных местах.
3. Пройдите элементы вперёд и назад. Используйте Tab и Shift+Tab для обычной последовательной навигации. Отмечайте пропущенные действия, неожиданные скачки и места, где положение фокуса не видно.
4. Проверьте активацию. Для обычной кнопки проверьте Enter и пробел; для ссылки — предусмотренный переход по Enter. Сложные компоненты сравнивайте с их документированной моделью управления.
5. Откройте меню и окно. Проверьте доступ к содержимому, способ закрытия и положение фокуса после выхода. Не считайте нормальное удержание фокуса внутри открытого модального окна ошибкой само по себе.
6. Заполните тестовую форму. Пройдите поля, измените выбор и исправьте ошибочное значение. Убедитесь, что сообщение об ошибке можно обнаружить и продолжить работу без мыши.
7. Проверьте перекрывающие блоки. Проследите путь после появления закреплённых панелей и уведомлений. Элемент с фокусом не должен полностью исчезать за содержимым страницы.
8. Оформите замечания и повторите проверку. Передайте точные клавиши и результат. После исправления снова пройдите исходный сценарий, включая вход в компонент и выход из него.

Как следить за фокусом

Фокус показывает, куда направлено следующее клавиатурное действие. Это не то же самое, что указатель мыши, выбранный пункт раздела или подсветка при наведении. У кнопки может быть красивое состояние наведения, которое вообще не появляется при переходе клавиатурой.

На каждом шаге ответьте себе, какой элемент сейчас получит Enter или ввод текста. Если определить это невозможно, зафиксируйте место. Не требуется одна обязательная форма отметки для всех сайтов: важны её различимость и связь с текущим элементом.

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

Если элемент уехал под закреплённую панель

Продолжайте переходы в нижней части страницы и рядом с закреплённой шапкой. Иногда браузер прокручивает документ к элементу, но панель закрывает его. Тогда посетитель знает, что фокус куда-то переместился, но не понимает, с чем сейчас взаимодействует.

Отдельно проверяйте сам элемент и отметку фокуса. В минимальном критерии W3C о перекрытии речь идёт о том, чтобы компонент не был полностью скрыт содержимым, созданным автором страницы. Частичная видимость не делает любой интерфейс удобным, а невидимая отметка может оставаться отдельной проблемой.

Как проверить меню и сложные компоненты

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

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

Если меню раскрывается только при наведении мыши, проверьте альтернативный путь с клавиатуры. Недостаточно увидеть панель: нужно дойти до нужной ссылки, открыть её либо вернуться на страницу. Запишите, на каком из этих участков путь обрывается.

Модальное окно и клавиатурная ловушка

Когда открывается модальный диалог, фокус должен оказаться внутри него. Пока диалог активен, последовательная навигация обычно остаётся среди его элементов. Это помогает не взаимодействовать с перекрытой страницей случайно.

Проверьте закрытие клавишей Escape и доступный клавиатурой элемент закрытия, если используется обычная модель модального диалога. После закрытия фокус обычно возвращается к элементу, открывшему окно; другой переход должен объясняться сценарием, например удалением самого исходного элемента.

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

Как проверить форму

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

Создайте безопасную ошибку ввода, затем исправьте её. Проверьте, понятно ли, какое поле требует внимания, и можно ли добраться до него без мыши. Если сообщение появляется в стороне от текущего положения, запишите, как пользователь должен его обнаружить.

После тестового завершения посмотрите, где оказался фокус и понятен ли результат. Исчезновение формы не должно оставлять человека без ориентира. Доставку письма или создание записи подтверждайте отдельно: клавиатурная доступность отправки не доказывает работу последующей обработки.

Частые ошибки

• Помогать мышью при проверке. Так можно незаметно обойти недоступный участок. Запишите препятствие до любого обхода.
• Проверять только Enter. У кнопок и составных компонентов есть ожидаемые клавиатурные модели; одной клавиши недостаточно для общего вывода.
• Убирать рамку фокуса. Без видимой замены становится трудно понять, куда переместилось управление.
• Добавлять Tab ко всему подряд. Декоративные элементы и неподходящий порядок создают лишние остановки вместо исправления сценария.
• Исправлять порядок случайными положительными tabindex. Это может усложнить навигацию и поддержку. Сначала проверьте структуру документа и назначение элементов.
• Проверять окно только изнутри. Вход, закрытие и возврат к странице так же важны, как доступ к полям.

Как проверить

• Основной сценарий пройден без мыши в записанных условиях.
• Положение фокуса видно на каждом нужном шаге.
• Порядок переходов позволяет понять структуру действия.
• Кнопки, ссылки и составные компоненты реагируют по своей модели.
• Из меню, окон и встроенных блоков можно выйти клавиатурой.
• Фокус не теряется после закрытия окна или смены состояния.
• Форма позволяет исправить ошибку и продолжить тестовое действие.
• Для каждого замечания записаны адрес, клавиши, ожидаемый и фактический результат.

Требования к управлению и видимому фокусу описаны в пояснении W3C о клавиатуре и материале о фокусе; модель окна — в руководстве по модальным диалогам. Дополните проверку оценкой контраста, проверкой формы и прохождением сайта на телефоне. Исправления можно обсудить с исполнителем в разделе «Разработка».

Для реализации окна используйте инструкцию по модальному диалогу на HTML dialog, затем повторите полный клавиатурный маршрут.

Если на странице закреплена навигация, дополнительно проверьте, как закреплённая шапка на CSS влияет на переходы с клавиатуры и видимость активного элемента.

Вопросы и ответы

Должен ли Tab останавливаться на каждом тексте и изображении?

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

Почему на одной системе ссылка пропускается, а на другой нет?

Проверьте настройки клавиатурной навигации браузера и системы, а также одинаковость страницы и состояния. Запишите различия. Не объявляйте код неисправным, пока не отделили его поведение от настроек среды.

Рамка при наведении мыши подтверждает видимый фокус?

Нет. Наведение и клавиатурный фокус — разные состояния. Перейдите к элементу клавиатурой и проверьте, сохраняется ли понятная отметка текущего положения без участия указателя.

Цикл Tab внутри окна всегда считается ловушкой?

Нет. Для модального диалога удержание последовательности внутри окна ожидаемо. Проверьте, можно ли закрыть его клавиатурой и вернуться к осмысленному месту страницы. Проблема возникает, если доступного выхода нет.

Можно ли исправить всё добавлением tabindex?

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

Нужно ли отправлять настоящую форму?

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

Подтверждает ли эта проверка полную доступность сайта?

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