Почему :focus-visible — это больше, чем просто псевдокласс
Когда мы говорим о доступности, в первую очередь вспоминаем скринридеры, контрастность и альтернативный текст. Но что насчет пользователей, которые перемещаются по сайту с клавиатурой? Вот тут и вступает в игру псевдокласс `:focus-visible`. Он позволяет отображать фокус только тогда, когда пользователь действительно его ожидает — например, при навигации с клавиатуры, а не при кликах мышью. Это делает интерфейс чище для большинства, но при этом сохраняет критически важную доступность для нуждающихся. Использование `:focus-visible` — это не просто модный CSS-хак, а мощный инструмент для точной настройки взаимодействия.
Необходимые инструменты для работы с :focus-visible
Чтобы начать использовать `:focus-visible`, не нужно устанавливать сложные библиотеки или фреймворки. Всё, что потребуется — современный браузер и немного CSS. Поддержка этого псевдокласса в актуальных версиях Chrome, Firefox и Safari уже встроена, а значит, можно применять его прямо сейчас. Для обратной совместимости с более старыми браузерами, можно подключить polyfill `focus-visible` от WICG. Это особенно важно, если вы работаете над крупным проектом, где улучшение доступности с `:focus-visible` должно быть реализовано без ущерба для всех пользователей.
- Современный браузер (Chrome, Firefox, Safari, Edge)
- Редактор кода (VS Code, Sublime, WebStorm)
- Polyfill focus-visible (если нужна поддержка IE/старых версий)
Особенно полезно подключить расширения для тестирования доступности — например, Axe или Lighthouse. Это поможет быстро проверить, действительно ли ваш сайт стал лучше восприниматься с клавиатуры.
Как использовать :focus-visible: пошаговая настройка
Итак, как использовать `:focus-visible`? Сначала вы определяете элементы, на которых должен отображаться фокус при навигации с клавиатуры: ссылки, кнопки, интерактивные формы. Далее в CSS задаёте стиль для этих элементов, используя `:focus-visible` вместо стандартного `:focus`. Это избавит вас от «мигающих рамок» при кликах мышью, но сохранит их для тех, кто использует клавиши Tab, Shift+Tab и т. д.
```css
button:focus-visible,
a:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
```
Если вы хотите предложить нестандартное решение — добавьте плавную анимацию или контекстуальные подсказки при появлении фокуса. Это может быть особенно полезно в интерфейсах с большим количеством интерактивных элементов. Например, можно добавить subtle glow или тень:
```css
input:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}
```
Придумайте нестандартное поведение фокуса
Вместо того чтобы просто выделять элемент рамкой, можно использовать `:focus-visible` для запуска анимаций, изменения текста кнопки или даже подсказок. Это повысит вовлечённость и поможет пользователю понять, на чём он сфокусирован.
- Меняйте цвет иконки внутри кнопки при фокусе
- Показывайте тултипы или инструкции (например, «Нажмите Enter для отправки»)
- Добавляйте лёгкие анимации или трансформации, чтобы направить внимание
Такой подход делает доступность не только функциональной, но и визуально привлекательной.
Устранение неполадок: когда :focus-visible не работает
Иногда кажется, что вы всё сделали правильно, но фокус не отображается. Причины могут быть разными. Во-первых, убедитесь, что вы действительно используете клавиатуру для навигации. `:focus-visible` не срабатывает при клике мышью — это его особенность. Также стоит проверить, не отключен ли outline глобально в CSS. Многие разработчики пишут `*:focus { outline: none; }` и забывают вернуть его обратно для доступных элементов. И, конечно, не забывайте о polyfill — без него поддержка в старых браузерах будет отсутствовать.
- Проверьте, не удалили ли вы фокус глобально
- Убедитесь, что используете клавиатуру, не мышь
- Подключите polyfill для совместимости с устаревшими браузерами
Тестирование и отладка
Чтобы проверить, работает ли доступность веб-сайта с `:focus-visible`, используйте Lighthouse или Axe. Эти инструменты подскажут, где фокус отсутствует или не виден. Также можно включить режим «keyboard only» в браузере и пройтись по всем интерактивным элементам. Если фокус появляется только там, где нужно — вы на верном пути. В противном случае пересмотрите селекторы и стили.
Заключение: доступность как часть дизайна
`:focus-visible` — это не просто технический приём, а способ сделать интерфейсы интуитивно понятными для всех. Он помогает убрать визуальный шум для пользователей мыши и при этом обеспечивает навигацию для тех, кто полагается на клавиатуру. Доступность веб-сайта с `:focus-visible` — это шаг к универсальному дизайну, где каждый чувствует себя комфортно. Применяя `:focus-visible` примеры в своём проекте, вы не только улучшаете UX, но и заботитесь о тех, кто часто остаётся за пределами внимания.
Нестандартные подходы — такие как анимации, кастомные тултипы и выделение контекста — помогают превратить доступность в конкурентное преимущество. Улучшение доступности с `:focus-visible` — это не просто требование, а возможность сделать продукт лучше для всех.
