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