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