Клавиатурный фокус: что это и как его проверить

Фокус, наведение и выбор — разные состояния

Наведение связано с указателем мыши. Фокус может перемещаться с клавиатуры. Выбранное значение сохраняет результат выбора. Например, в группе вариантов время «12:00» может быть выбрано, пока фокус уже находится на кнопке продолжения.

Поэтому одно состояние не следует заменять другим. Подсветка под мышью не помогает человеку, который идёт по форме с клавиатуры, а отметка выбранного значения не всегда показывает текущее место ввода.

Учебный пример: форма записи

В вымышленной форме есть поля имени и почты, затем кнопка «Записаться». При последовательных переходах пользователь должен видеть, какое поле сейчас активно. Когда фокус перемещается на кнопку, индикатор должен оставаться различимым и на её заливке, и рядом с фоном страницы.

В макете полезно показать это состояние отдельно. Подпись «сделать доступно» недостаточно конкретна для передачи: укажите вид индикатора, отступ от границы и его поведение рядом с соседними элементами.

Зачем нужен видимый индикатор

Критерий WCAG 2.4.7 уровня AA требует режима работы с видимым клавиатурным фокусом. Он помогает людям, которые видят экран и управляют интерфейсом с клавиатуры. Индикатор не должен исчезать по таймеру, пока элемент сохраняет фокус.

Для реализации в CSS существует :focus-visible: он позволяет оформить фокус в ситуациях, когда браузер определяет необходимость видимого индикатора. Это не обозначение только клавиши Tab. Поведение зависит от способа взаимодействия и типа элемента.

Как проверить страницу

1. Начните с обычного состояния страницы и временно отложите мышь.
2. Перемещайтесь Tab и Shift + Tab. Следите, понятен ли порядок и видно ли текущее место.
3. Проверьте работу элементов подходящими клавишами: например, Enter для ссылки, стрелками внутри некоторых составных элементов.
4. Откройте диалог и закройте его. Проверьте перемещение фокуса и возвращение к месту вызова.
5. Повторите проверку при ошибке формы и на узком экране.

Конкретные клавиши зависят от типа элемента. Не следует ожидать, что каждый внутренний пункт любого виджета обязательно будет отдельной остановкой Tab.

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

• Удалять стандартную обводку без равноценной видимой замены.
• Показывать только Hover и забывать про клавиатуру.
• Делать индикатор почти неотличимым от соседнего фона.
• Допускать потерю фокуса после закрытия всплывающего элемента.

При проверке оформления учитывайте контраст и реальное окружение элемента. Хорошая обводка сама по себе не решает вопросы порядка переходов, доступных имён и работы управления.

Источники: W3C: Focus Visible и MDN: :focus-visible.