mefody.dev

Прекрасные аутлайны для фокуса



Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.



1. Используйте :focus-visible вместо :focus. В таком случае фокусное выделение будет показываться тогда, когда оно действительно нужно.



2. Если нужно выделить только текст, без фона, можно цветом обводки сделать currentColor — в целом, смотрится неплохо. В статье есть готовый сниппет, который можно попробовать вставить в проект как умолчание, если дизайнер пока не придумал отдельно фокусные состояния интерактивных элементов.



3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.



4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.



5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для :hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.



https://medienbaecker.com/articles/focus-outlines