Видимый фокус: никогда не скрывайте контур

Пользователь клавиатуры может одновременно видеть только одно: какой элемент управления получил фокус. Этот видимый маркер называется индикатором фокуса. 👀

По умолчанию браузер рисует контур фокуса вокруг активного элемента, когда Вы переходите по странице с помощью Tab. Это встроенный маркер «Вы здесь».

Дизайнерам часто не нравится контур, и они удаляют его. Одно правило — outline none — мгновенно лишает пользователей клавиатуры ориентира. Никогда не выпускайте сайт с ним без замены.

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

Хороший индикатор легко заметить: это может быть толстый контур, кольцо или резкое изменение цвета. Здесь незаметность — враг, а не помощник.

Селектор focus-visible показывает кольцо пользователям клавиатуры, но скрывает его при обычных щелчках мышью. Вы получаете безопасность без лишнего визуального шума.

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

Остерегайтесь свойства overflow hidden у родительского элемента. Оно может обрезать контур фокуса, из-за чего нижний край незаметно исчезнет.

Используйте outline-offset, чтобы отодвинуть кольцо от элемента. Небольшой зазор значительно облегчает обнаружение индикатора.

Это не просто косметическая настройка. WCAG требует видимого индикатора фокуса для каждого интерактивного элемента, поэтому его скрытие может привести к несоответствию требованиям.

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

Никогда не убирайте кольцо фокуса без замены. Используйте focus-visible, обеспечьте достаточную контрастность и отступ, а затем самостоятельно проверьте всё с помощью Tab. ✅