Сайт должен позволять выполнить с клавиатуры те же основные действия, что и мышью: перейти по меню, заполнить форму, открыть диалог и закрыть его. Главный критерий — не формальное наличие фокуса, а предсказуемый маршрут без ловушек и потерянных элементов. В 2026 году особенно полезно проверять сложные интерфейсные компоненты и видимость активной области.
Какие требования становятся приоритетными?
В центре внимания остаются четыре свойства: доступность всех действий, логичный порядок переходов, заметный индикатор фокуса и корректное поведение динамических компонентов. Если хотя бы одно из них нарушено, пользователь может буквально потеряться на странице.
Начинать лучше с базовой разметки. Ссылкам нужна семантика ссылок, кнопкам — элемент button, полям — связанные с ними подписи. Нативные элементы уже поддерживают ожидаемое поведение клавиш и обычно требуют меньше исправлений, чем интерактивные блоки на основе div.
Отдельная задача — управление состояниями. Раскрытое меню должно сообщать о своём состоянии, диалог — получать фокус после открытия, а сообщение об ошибке не должно оставаться незаметным за пределами текущей области. Один лишь атрибут tabindex эти задачи не решает.
| Область проверки | Ожидаемое поведение | Типичная проблема |
|---|---|---|
| Меню | Пункты доступны в понятном порядке | Фокус попадает в скрытое подменю |
| Форма | Подписи, поля и ошибки связаны по смыслу | Ошибка видна, но не обнаруживается при вводе |
| Диалог | Фокус переходит внутрь и возвращается к кнопке запуска | После закрытия позиция теряется |
| Составной виджет | Стрелки и Tab выполняют ожидаемые действия | Каждая внутренняя часть создаёт лишнюю остановку |
Как выстроить правильный маршрут фокуса?
Порядок переходов должен соответствовать смысловой и визуальной последовательности страницы. Обычно надёжнее сохранить естественный порядок HTML, чем исправлять неудачную структуру положительными значениями tabindex.
Сначала пользователь проходит шапку, основную навигацию и содержание, затем связанные действия. Ссылка для быстрого перехода к основному контенту помогает пропустить повторяющееся меню. Она может быть скрыта до получения фокуса, но после нажатия должна переносить пользователя в реальную точку продолжения.
В одностраничных интерфейсах маршрут сложнее. После смены представления фокус иногда остаётся на исчезнувшей кнопке или возвращается в начало документа. Решение зависит от контекста: фокус можно перевести на заголовок нового экрана, сообщение о результате либо первый элемент начавшегося процесса. Автоматический перенос не всегда нужен — неожиданное движение тоже сбивает.
Особого внимания требуют закреплённые панели и всплывающие элементы. Визуально кнопка может находиться рядом, а в DOM — далеко от связанного блока. При последовательном нажатии Tab этот разрыв ощущается как резкий скачок: рамка фокуса исчезает сверху и возникает у нижнего края экрана.
Как должны работать сложные компоненты?
Для вкладок, списков, деревьев и комбинированных полей недостаточно сделать каждый пункт доступным через Tab. Компоненту нужна цельная модель управления: Tab входит в него и выходит, а перемещение внутри обычно выполняют стрелки или другие ожидаемые клавиши.
Подход выбирают по типу виджета. Иногда активным делают один внутренний элемент и меняют его tabindex. В других случаях фокус сохраняют на контейнере, а текущий пункт обозначают через aria-activedescendant. Оба варианта требуют синхронизации визуального выделения, программного состояния и реакции на клавиши.
Модальные окна должны удерживать фокус внутри, пока открыты. Клавиша Escape обычно закрывает окно, если это не разрушает незавершённое критическое действие. После закрытия фокус возвращают на элемент, который запустил диалог; иначе пользователь оказывается в случайной части страницы.
Не следует назначать обработчик клика обычному блоку и считать компонент готовым. Понадобятся роль, доступное имя, реакция на подходящие клавиши и состояние недоступности. Чаще проще заменить такой блок нативной кнопкой: она предсказуемо реагирует на Enter и пробел без дополнительной имитации.
Каким должен быть индикатор фокуса?
Активный элемент должен быть заметен на каждом фоне и во всех состояниях компонента. Тонкая рамка близкого оттенка часто растворяется на изображении, цветной карточке или затемнённой подложке.
Практичный индикатор сочетает контраст и форму: например, внешнюю обводку с небольшим отступом. Псевдокласс :focus-visible позволяет показывать её преимущественно при клавиатурном взаимодействии, не убирая фокус полностью. Глобальное правило outline: none без равноценной замены оставляет пользователя без ориентира.
Следует проверить и геометрию. Обводку могут обрезать контейнеры с overflow: hidden, перекрывать липкая шапка или уводить за пределы прокручиваемой области. Хороший индикатор не просто существует в CSS — он остаётся видимым на экране в момент перехода.
Как провести проверку без сложных инструментов?
Первый тест выполняют только клавиатурой, начиная с адресной строки браузера. Нужно пройти основной сценарий целиком и записать место каждой остановки, неожиданного скачка или исчезновения фокуса.
- Нажать Tab и убедиться, что первый полезный переход позволяет пропустить повторяющиеся блоки.
- Пройти меню, формы и основные кнопки в порядке, который соответствует содержанию страницы.
- Активировать элементы клавишами Enter и пробелом, учитывая назначение конкретного компонента.
- Открыть все диалоги и проверить вход, удержание и возврат фокуса.
- Повторить сценарий в обратном направлении с помощью Shift+Tab.
- Проверить страницу при увеличении масштаба и появлении мобильной или адаптивной компоновки.
Автоматическая проверка помогает обнаружить часть ошибок разметки, однако не оценивает удобство маршрута полностью. Инструмент может подтвердить наличие доступного имени, но не поймёт, почему после кнопки «Оплатить» фокус внезапно переходит в шапку.
Исправления разумно начинать с действий, влияющих на завершение сценария: входа в аккаунт, поиска, оформления заказа, отправки формы. Затем устраняют лишние остановки и визуальные дефекты. В результате интерфейс перестаёт быть полосой препятствий: фокус движется по странице ровно и остаётся там, где пользователь ожидает его увидеть.