Таб-навигация

Определение: Таб-навигация — это возможность перемещаться по сайту с клавиатуры с помощью клавиши Tab (и Shift+Tab), переходя по ссылкам, кнопкам и полям формы в логичном порядке. Это важная часть accessibility: пользователь должен уметь пройти страницу без мыши и понимать, где сейчас находится фокус.

Зачем это нужно

• Сделать сайт доступным для людей, которым сложно пользоваться мышью или тачпадом.
• Упростить работу тем, кто привык к клавиатуре (например, быстро заполняет формы).
• Снизить точки трения в формах: переход между полями должен быть предсказуемым.
• Повысить удобство на мобильных и планшетах с клавиатурой.
• Избежать «невидимой» навигации: пользователь должен видеть фокус и понимать, куда перейдёт дальше.
• Улучшить качество интерфейса в целом: логичная структура обычно делает сайт понятнее.

Пример

Пользователь заходит на страницу услуги и не использует мышь. Он нажимает Tab и фокус последовательно проходит по важным элементам: сначала по ссылкам меню, затем по кнопке «Оставить заявку», дальше — по полям формы (Имя → Телефон → Комментарий) и в конце — по кнопке «Отправить». На каждом шаге активный элемент подсвечен заметной обводкой, поэтому понятно, где он находится.

Если в форме допущена ошибка, пользователь видит сообщение рядом с полем (например, «Введите телефон в формате +7…») и может сразу перейти Tab обратно к проблемному полю. Когда открывается модальное окно (например, «Спасибо, заявка отправлена» или «Заказать звонок»), фокус остаётся внутри модалки, и Tab не уводит на элементы под затемнением.

Скриншот

Подпись к скриншоту: один и тот же экран страницы, где видно активный элемент при нажатии Tab: заметная обводка фокуса на кнопке, затем на поле формы и на ссылке

Частые ошибки

• Убирать outline у элементов и не заменять его видимым стилем фокуса.
• Нелогичный порядок перехода: фокус прыгает «как попало» из-за структуры или скрытых элементов.
• Фокус попадает на элементы, которые не должны быть интерактивными (или наоборот — пропускает важные).
• Модальные окна не удерживают фокус внутри себя: Tab уводит пользователя на элементы под модалкой.
• Нельзя активировать элементы с клавиатуры (например, нестандартные кнопки без корректной реализации).

Связанные термины

• Accessibility (доступность)
• Фокус (keyboard focus)
• Семантическая верстка
• Формы (form)
• Валидация формы
• Контрастность

Наши услуги

• Доработка сайтов — настраиваем таб-навигацию, видимый фокус и исправляем проблемы доступности.
• Создание корпоративных сайтов — закладываем корректную навигацию с клавиатуры на этапе разработки.
• Техническая поддержка сайта — устраняем ошибки в интерфейсе, модалках и формах, из-за которых Tab работает неправильно.