Лендинг без мыши: проверка меню, формы и фокуса
Проверка лендинга клавишами Tab, Shift+Tab, Enter и Escape: порядок фокуса, меню, модальные окна, ошибки формы и запись найденных проблем.
Уберите мышь и попробуйте оставить заявку. Если кнопка видна, но до неё нельзя добраться с клавиатуры, лендинг закрывает путь части посетителей. Проверку можно начать без специального оборудования: нужен браузер и понятный сценарий.
Для страницы, собранной AI-агентом, это отдельная приёмка. Скриншот показывает форму, но ничего не говорит о порядке фокуса или возможности закрыть модальное окно. Я бы начинал с того же действия, ради которого на сайт ведётся реклама, и проходил его целиком.
Составьте маршрут до первой клавиши
Запишите исходный URL и задачу: открыть меню, найти условия, перейти к форме, заполнить контакт, отправить. Если есть всплывающее окно, включите его в маршрут. Для проверки используйте разрешённые тестовые данные и окружение, где отправка не создаст нежелательного обращения.
Нажимайте Tab последовательно и наблюдайте за фокусом. Shift+Tab проверяет обратный путь. Enter обычно активирует ссылку или действие формы; поведение остальных клавиш зависит от элемента. Не назначайте всем компонентам один выдуманный стандарт: нативные поля, кнопки и составные виджеты имеют разные модели управления.
Пояснение W3C к критерию Keyboard требует доступности функциональности через клавиатурный интерфейс, с оговорёнными исключениями для действий, зависящих от траектории движения. Обычная заявка, меню и ссылки лендинга к таким исключениям не относятся.
Что записывать при обходе
| Участок | Проверка | Признак проблемы |
|---|---|---|
| Навигация | Дойти до ссылки, открыть и вернуться | Ссылка пропущена или фокус незаметен |
| Меню | Открыть, выбрать пункт, закрыть | Визуально открыто, клавиатура уходит под слой |
| Диалог | Пройти элементы и закрыть | Фокус потерян либо остался внутри невидимого окна |
| Форма | Заполнить, получить ошибку, исправить | Непонятно, какое поле ошибочно и где оно находится |
| Таблица | Добраться до области прокрутки | Правая колонка доступна только перетаскиванием мыши |
У каждой ошибки сохраните последовательность клавиш, ожидаемый результат и фактическое поведение. «Плохо с доступностью» не позволяет воспроизвести проблему. «После открытия меню Tab уходит к форме под затемнением» уже даёт разработчику конкретное место для исправления.
Видимость и порядок фокуса проверяют отдельно
Посмотрите, отличается ли активный элемент от соседних. Тонкая рамка на таком же фоне может быть технически задана и практически незаметна. Проверьте её на кнопках с заливкой, текстовых ссылках и полях. Не убирайте outline только потому, что стандартная обводка не совпадает с макетом.
Затем оцените порядок. Он должен помогать чтению и действию, а не прыгать между шапкой и подвалом. Положительные tabindex, добавленные ради быстрого исправления, могут сделать последовательность хрупкой: новый блок потребует пересмотреть всю нумерацию. Лучше сначала проверить порядок элементов в документе и нативную семантику.
После закрытия диалога человек должен понимать, где продолжать. Практическая проверка: откройте окно с кнопки, закройте предусмотренным способом и посмотрите, куда вернулся фокус. Если он пропал на начало документа, действие придётся искать заново. На длинной странице это уже заметная помеха.
Пройдите неудачную отправку
Пропустите обязательное поле и отправьте форму клавиатурой. Проверьте, где появляется объяснение, можно ли найти неверное поле и сохранились ли остальные данные. Затем исправьте ввод. Ошибка, видимая только красной рамкой, мало помогает человеку понять причину.
В карте состояний формы отдельно разобраны ожидание, отказ сервера и неопределённый результат. Здесь важно, чтобы каждый такой переход оставлял доступный следующий шаг. Красивое сообщение в стороне экрана легко пропустить, если фокус остаётся далеко от него.
Принимайте исправленный маршрут
После правки повторите весь затронутый путь с начала и в обратном направлении там, где это уместно. Не ограничивайтесь элементом, на котором нашли ошибку: изменённая ловушка фокуса может повлиять на закрытие окна и навигацию под ним. Сохраните результат для конкретной версии и браузера.
Общую готовность страницы проверяет приёмка перед запуском, а отдельные проблемы телефона — проверка экранной клавиатуры. Успешный обход обычной клавиатурой не является полной проверкой всех вспомогательных технологий. Зато он даёт воспроизводимый минимум, который можно выполнить уже сейчас.