Как настроить :focus-visible для заметной клавиатурной навигации на сайте

5 минут чтения

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

Контрольный список внедрения :focus-visible

Не удаляйте стандартный индикатор фокуса без замены.
Добавьте отдельные стили для :focus-visible и сохраните безопасный резерв для :focus.
Проверьте обводку на светлых и тёмных участках интерфейса.
Убедитесь, что фокус виден в формах, меню и диалогах.
Пройдите клавиатурный сценарий перед выпуском.

Чем :focus-visible отличается от :focus

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

Такой подход подходит интерактивным элементам, которыми можно управлять с клавиатуры. Не скрывайте фокус у кнопок, ссылок, полей ввода или пользовательских компонентов: если нужно убрать браузерный стиль, сначала задайте заметную замену.

Добавьте базовые стили без потери видимого фокуса

Для настройки понадобятся доступ к CSS проекта, браузер для ручной проверки и список интерактивных компонентов. Уточните, где уже заданы стили :focus и outline: none: каскад может переопределять новые правила.

/* Резервный видимый фокус */
:focus {
  outline: 2px solid #174ea6;
  outline-offset: 3px;
}

/* В браузерах с :focus-visible можно настроить его отдельно */
:focus-visible {
  outline: 3px solid #174ea6;
  outline-offset: 3px;
}

Это начальная настройка CSS для :focus-visible, а не универсальная палитра: цвет и толщину нужно согласовать с интерфейсом. Если в проекте есть собственные правила фокуса, проверьте специфичность селекторов и порядок подключения таблиц стилей.

Настройте контраст обводки на светлом и тёмном фоне

Определите участки интерфейса.
Составьте перечень фонов, на которых появляются интерактивные элементы: страницы, карточки, панели, кнопки и меню.
Выберите различимую обводку.
Подберите цвет, толщину и отступ так, чтобы индикатор не сливался с фоном и соседними границами. Для неоднородных или переменных фонов проверьте несколько вариантов, а не только один экран.
Добавьте стили для светлой и тёмной темы.
Используйте переменные проекта или отдельные правила темы, чтобы индикатор сохранял заметность в обоих режимах.
```
:root {
  --focus-color: #174ea6;
}

[data-theme="dark"] {
  --focus-color: #9fc3ff;
}

:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
```
Проверьте состояние на реальных компонентах.
Переключайте фокус клавишей Tab и проверьте, не обрезает ли обводку контейнер с overflow: hidden и не перекрывают ли её соседние элементы.

Быстрый режим

Добавьте заметное правило :focus-visible.
Оставьте видимый резервный стиль для :focus.
Проверьте контраст обводки в каждой теме.
Пройдите интерфейс клавишей Tab и исправьте пропуски.

Проверьте фокус в формах, меню и диалогах

Клавиша Tab переводит фокус к интерактивным элементам в ожидаемом порядке.
Shift+Tab перемещает фокус назад.
Ссылки и кнопки имеют заметный индикатор при клавиатурной навигации.
Поля ввода, переключатели и элементы выбора сохраняют видимый фокус.
В раскрытом меню можно увидеть, на каком пункте находится фокус.
В диалоге фокус не теряется за его пределами и возвращается к вызвавшему элементу после закрытия.
Обводку не обрезают контейнеры, анимации или соседние элементы.
Визуальное оформление не скрывает фокус в активном состоянии компонента.

Такая проверка помогает оценить доступность сайта при клавиатурной навигации не только по внешнему виду, но и по поведению компонентов.

Учтите поддержку браузеров и резервные стили

Не полагайтесь на :focus-visible как на единственный способ показать фокус.
Не задавайте outline: none без равноценной видимой замены.
Не проверяйте интерфейс только мышью: она не показывает, как пользователь проходит страницу клавиатурой.
Не используйте один цвет обводки для всех фонов без проверки контраста.
Не стилизуйте только кнопки: ссылки, поля и пользовательские элементы тоже могут получать фокус.
Не забывайте про состояния наведения и активного элемента: они не должны скрывать индикатор.
Проверьте, не перебивают ли новые правила более специфичные селекторы компонентов.

Правила :focus служат резервом, а :focus-visible - более точной настройкой отображения. Если проект поддерживает старые браузеры, проверьте целевой список браузеров и оставьте запасной стиль, который сохраняет видимый фокус.

Пройдите клавиатурный сценарий перед выпуском

Ручная проверка. Подходит для быстрой оценки страниц и отдельных компонентов: отключите мышь и пройдите интерфейс Tab и Shift+Tab.
Проверка разных браузеров. Уместна, когда проект поддерживает несколько браузеров или использует нестандартные компоненты. Сверьте поведение фокуса в каждом целевом браузере.
Проверка тем и состояний. Используйте её, если есть тёмный режим, раскрывающиеся меню, диалоги или сложные формы. Пройдите одинаковый сценарий в каждом важном состоянии.

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

Нюансы внедрения :focus-visible

Нужно ли задавать одновременно :focus и :focus-visible?

Полезно сохранить видимый стиль для :focus как резерв и отдельно настроить :focus-visible. Так отсутствие поддержки селектора не приводит к полной потере индикатора.

Можно ли полностью убрать outline?

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

Почему обводка появляется после нажатия клавиши Tab, но не после мыши?

Так браузер обычно различает способы взаимодействия и решает, когда уместно показывать индикатор через :focus-visible. Точное поведение зависит от браузера и контекста.

Почему фокус не виден, хотя правило CSS добавлено?

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

Нужно ли задавать отдельные цвета для тёмной темы?

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

Подходит ли :focus-visible для пользовательских компонентов?

Да, если компонент корректно получает фокус с клавиатуры и его состояние видно пользователю. Для сложных компонентов отдельно проверьте порядок переходов и управление с клавиатуры.

Автор: Виктор Егоров

Post Views: 0