CSS :focus-visible: показать фокус клавиатуры

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

Рабочий пример

button:focus-visible,
a[href]:focus-visible {
  outline: 3px solid #1456d8;
  outline-offset: 3px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

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

Частый вопрос

Нужен ли :focus-visible для ссылок?

Да, любой элемент, доступный с клавиатуры, должен иметь видимый индикатор фокуса. Селекторы можно адаптировать под вашу дизайн-систему.