Создание полезных сайтов
Как проверить страницу с клавиатуры: найти, нажать и выйти
Добраться до кнопки — только первый шаг. Выполните одну задачу с клавиатуры, проверьте результат нажатия и возможность продолжить работу или выйти.
1. Выберите задачу и отложите мышь
Выберите страницу, которую поддерживаете, и одну задачу: открыть список книг, изменить фильтр или добраться до формы связи. Действия, которые отправляют сообщения или меняют записи, проверяйте на тестовой версии. Заранее запишите, какой результат ожидаете.
Откройте страницу через адресную строку, затем пользуйтесь клавиатурой. Запишите браузер и операционную систему. Настройки браузера или системы могут влиять на то, какие элементы достигаются клавишей Tab; проверьте их, если обычные ссылки пропускаются. Это начальная проверка управления с клавиатуры, а не полный аудит доступности.
2. Проследите путь фокуса в обе стороны
Нажимайте Tab для движения вперёд и Shift+Tab для возвращения. Фокус показывает, какой элемент получит следующее действие с клавиатуры. На каждой остановке определяйте его по самой странице: рамка, обводка или другой заметный признак должны показывать, где вы находитесь. Проверьте, не закрывает ли этот элемент закреплённая шапка или баннер.
Запишите отдельно элементы, до которых рассчитывали добраться, и элементы, которые действительно получили фокус. Заголовок или обычный абзац обычно не являются остановками Tab. Не добавляйте весь текст в последовательность только ради длинного списка. Внутри сложных элементов могут использоваться стрелки; сверяйтесь с правилами конкретного элемента, а не требуйте, чтобы Tab перебирал каждый вариант.
Порядок должен быть понятен для выбранной задачи. Если фокус из футера возвращается к первому полю, запишите именно этот переход. MDN рекомендует логичный порядок в HTML вместо перестановки остановок положительными значениями tabindex.
3. Проверьте действие, а не только рамку
На обычной ссылке на страницу или её часть нажмите Enter. На кнопке, выполняющей действие, отдельно попробуйте Enter и пробел, каждый раз возвращаясь в исходное состояние. Видимый фокус ещё не доказывает, что клавиши работают. Пробел не является обычной проверкой активации ссылки.
После нажатия ищите обещанный результат. Появился ли список, изменилось ли значение, открылся ли нужный адрес? Записывайте наблюдаемое изменение: один только новый цвет кнопки не доказывает, что действие выполнено.
- Переход: «Подробности встречи» открывает другую страницу. Используйте настоящую ссылку с адресом в href.
- Действие: «Показать список книг» раскрывает сведения на текущей странице. Используйте кнопку и реализуйте её действие.
- Для разработчика: tabindex="0" делает кликабельный span доступным для фокуса, но не добавляет ему поведение обычной кнопки с клавиатуры.
4. Исправьте элемент в вымышленном книжном клубе
Представьте страницу вымышленного книжного клуба с элементами «Подробности встречи», «Показать список книг» и «Контакты». Список открывается нажатием мыши на оформленный текст. Tab переходит от подробностей встречи сразу к контактам, поэтому на этом маршруте список недоступен.
Неполное исправление добавляет tabindex="0". Теперь элемент получает фокус, но Enter и пробел по-прежнему ничего не делают: активация с клавиатуры не реализована. Проверка одной только движущейся рамки пропустит ошибку.
Лучшее исправление использует обычную кнопку с видимой подписью «Показать список книг», подключает её действие и сохраняет заметный фокус. Если кнопка раскрывает и сворачивает панель, синхронизируйте aria-expanded с состоянием раскрытия, как описано в шаблоне WAI для раскрываемого содержимого. Повторно проверьте переход к кнопке, обе клавиши активации и продолжение к контактам. Ситуация придумана для объяснения проверки; это не отчёт о реальном клубе.
Coru выполнила такое сравнение на собственной локальной странице 21 октября 2026 года в Chrome 155.0.8059.12. Tab пропустил span только с обработчиком клика и достиг span с tabindex="0". Enter и пробел не вызвали кликов на span с фокусом; обычная кнопка получила по одному клику от каждой клавиши. Shift+Tab вернул фокус со следующей ссылки к кнопке с видимой обводкой. Это браузерный опыт, а не проверка с пользователями экранных дикторов.
Чтобы повторить сравнение, разместите эти три элемента на локальной тестовой странице и назначьте каждому обработчику клика отдельный видимый счётчик. Запишите, до каких элементов доходит Tab и что показывает каждый счётчик после Enter и пробела. Сохраните версию браузера вместе с результатом: наблюдение относится к проверенному примеру.
5. Убедитесь, что можно закрыть или покинуть элемент
Откройте диалог, который встречается при выполнении задачи. Фокус должен перейти внутрь. В открытом модальном диалоге Tab и Shift+Tab намеренно остаются внутри. Попробуйте Escape и видимую кнопку «Закрыть» или «Отмена», затем проверьте, куда вернулся фокус. Обычно это элемент, открывший окно, если выполненное действие не делает другое место более логичным.
Такое временное ограничение отличается от ловушки клавиатуры. Если компонент нельзя закрыть или покинуть с клавиатуры, запишите способ входа и последнюю сработавшую клавишу. Менее привычный способ выхода требует инструкции. Использование мыши или перезагрузка страницы не считаются успешным выходом.
6. Скопируйте карточку проверки
Опишите ошибку достаточно узко, чтобы другой человек мог её повторить. Например: «После ссылки “Подробности встречи” нажать Tab один раз. Фокус на “Показать список книг”. Нажать пробел. Ожидается: список появится. Наблюдается: ничего не меняется». Это образец сообщения об ошибке, а не результат проверки публичного сайта.
- Страница и задача: ___. Дата, браузер и версия, операционная система, настройки клавиатуры: ___.
- Маршрут вперёд и назад: ___. Пропущенный элемент или неожиданный переход: ___.
- Подпись элемента: ___. Фокус заметен и не перекрыт: ___.
- Исходное состояние: ___. Клавиша: ___. Ожидаемый результат: ___. Наблюдаемый результат: ___.
- Выход из диалога и фокус после закрытия: ___. Диалога на маршруте нет / проверено / не проверено: ___.
- Исправление: ___. Те же шаги после перезагрузки опубликованной страницы: ___. Какие состояния ещё не проверены: ___.
Что означает успешный проход
Успешный проход показывает, что проверенная задача выполнилась этими клавишами в записанных условиях. Он не подтверждает соответствие WCAG, объявления экранного диктора, работу во всех браузерах или во всех состояниях страницы. Проверьте другие важные задачи и получите обратную связь от людей, использующих соответствующие вспомогательные технологии.
Если какой-то шаг остаётся непонятным, укажите в форме обратной связи ниже подпись элемента, нажатую клавишу и результат. Не отправляйте приватные адреса и данные учётных записей. Воспроизводимая ошибка полезнее сообщения «клавиатура не работает».