Веб-разработка: как настроить :focus-visible, чтобы фокус был заметен и не мешал мышиным пользователям

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

Что проверить перед внедрением :focus-visible

• Видимый фокус есть у всех элементов, которыми можно управлять с клавиатуры.
• Индикатор контрастен относительно фона и не перекрывает соседний текст.
• Стили проверены в контексте реальных компонентов, включая меню, диалоги и формы.
• Базовый стиль :focus сохранён для случаев, когда :focus-visible не применяется.
• Проверка включает клавиатуру, мышь и используемые в проекте скринридеры.

Какие элементы интерфейса требуют видимого клавиатурного фокуса

Индикатор нужен интерактивным элементам, на которые пользователь может перейти с клавиатуры: ссылкам, кнопкам, полям форм, элементам управления и компонентам с программно установленным фокусом. Особенно важно проверить сложные виджеты - например, выпадающие меню и диалоги.

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

Как задать базовый стиль фокуса без зависимости от мыши

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

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

/* Базовый индикатор фокуса */
:focus {
  outline: 2px solid #165dff;
  outline-offset: 3px;
}

/* Уточнение для ситуаций, когда браузер считает индикатор уместным */
:focus-visible {
  outline: 3px solid #165dff;
  outline-offset: 3px;
}

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

Как применять :focus-visible и сохранить удобный сценарий для клавиатуры

Перед изменением стилей подготовьте короткий сценарий проверки - так проще заметить, где фокус пропадает или выглядит иначе.

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

1. Зафиксируйте текущие правила. Найдите глобальные стили фокуса и переопределения в компонентах. Убедитесь, что не осталось правил, скрывающих индикатор без замены.
2. Добавьте базовый индикатор. Задайте видимое оформление для :focus. Это сохраняет резервное поведение там, где специальное правило не сработало.
3. Настройте клавиатурный вариант. Используйте :focus-visible, чтобы выделить фокус, который браузер считает необходимым показывать. Сохраните заметный контур и достаточный отступ от элемента.
4. Проверьте каскад стилей. Убедитесь, что правила компонентов не стирают общий индикатор. При необходимости задайте согласованные стили для конкретного компонента, а не отключайте контур глобально.
5. Пройдите интерфейс клавиатурой. Перемещайтесь клавишей Tab, возвращайтесь назад сочетанием клавиш, поддерживаемым вашей средой, и активируйте элементы. Проверьте, что текущая позиция всегда понятна.
6. Сравните поведение при работе мышью. Щёлкните по интерактивным элементам и проверьте, не появляется ли нежелательный для проекта контур. При этом не удаляйте базовый стиль :focus ради одного сценария.

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

Что учесть для браузеров без поддержки :focus-visible

Сохраните стиль :focus как резервный и проверьте результат в целевых браузерах проекта. Не полагайтесь на то, что отсутствие поддержки автоматически обеспечит нужный визуальный индикатор.

• Базовое правило :focus задано до специальных правил для :focus-visible.
• Фокус остаётся заметным, если браузер не применяет правило :focus-visible.
• Стили ссылок, кнопок и полей не перекрывают резервный индикатор.
• Для новых и старых целевых браузеров проверена одна и та же клавиатурная последовательность.
• В компонентах, где фокус устанавливается программно, индикатор также виден и не теряется после обновления интерфейса.
• При использовании библиотек проверены их правила фокуса и возможные переопределения.

Как проверить поведение фокуса мышью, клавиатурой и скринридером

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

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

Какие ошибки делают индикатор фокуса незаметным

Если оформление не подходит для всех компонентов, выбирайте альтернативу адресно, сохраняя понятный клавиатурный сценарий.

• Пользовательский контур. Замените браузерный индикатор собственным стилем с заметной границей и отступом. Уместно, когда дизайн-система задаёт единый вид фокуса.
• Фоновое выделение. Добавьте контрастный фон или тень вместе с контуром. Это полезно на сложных поверхностях, где одной линии недостаточно.
• Стили по типам компонентов. Настройте отдельное оформление для ссылок, полей и кнопок, если единый стиль плохо читается в части интерфейса. Сохраняйте общую визуальную логику.

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

Нюансы настройки :focus-visible в реальном интерфейсе

Нужно ли удалять outline у всех элементов?

Нет. Если убрать контур, обязательно задайте равноценный и заметный индикатор фокуса. Без замены пользователь клавиатуры может потерять текущую позицию.

Почему фокус виден при клавиатурной навигации, но не всегда после щелчка мышью?

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

Зачем оставлять правило :focus, если есть :focus-visible?

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

Можно ли использовать только цвет для обозначения фокуса?

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

Как проверять фокус внутри модального окна?

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

Когда нужен аудит доступности сайта?

Аудит полезен, когда интерфейс содержит много компонентов, сложные сценарии или сторонние виджеты. Включите в него проверку клавиатурного фокуса и его видимости на разных экранах.

Автор: Ольга Соколова.