Пользователь клавиатуры должен видеть, какой элемент сейчас получит действие. Псевдокласс :focus-visible позволяет оформить индикатор, когда браузер считает его необходимым. На Mentoring.digital разберём небольшой пример, который сохраняет стандартный фокус и добавляет заметную рамку.
Задайте рамку, не удаляя базовый индикатор
Оформим нативные ссылки, кнопки и поля. В примере нет общего правила outline:none, поэтому для остальных случаев остаётся поведение браузера.
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 12px;
}Толщина и отступ здесь являются параметрами учебного дизайна, а не универсальной гарантией доступности. Оцените рамку на реальном фоне, рядом с границей контрола и в состояниях ошибки или выбора.
Используйте элементы с правильным поведением
Для проверки поместите стили рядом с таким HTML:
<div class="actions">
<a href="#result">Перейти к результату</a>
<button type="button">Проверить</button>
<label>
Имя
<input name="name" autocomplete="given-name">
</label>
</div>
<p id="result">Результат упражнения</p>CSS не добавляет обработчик кнопке, а рамка не превращает div в полноценный элемент управления. Если нужен переход, используйте ссылку с адресом; если действие, кнопку. Порядок Tab обычно следует структуре документа, поэтому не пытайтесь исправлять неудачный порядок блоков только визуальным расположением.
Чем focus-visible отличается от focus
:focus соответствует элементу с фокусом. Для focus-visible браузер дополнительно применяет эвристики необходимости видимого индикатора. Клавиатурная навигация является важным сценарием, но правило нельзя свести к обещанию «после мыши рамки никогда нет».
Например, текстовому полю видимый фокус может быть нужен и после клика. Не используйте отсутствие рамки как доказательство того, что элемент не сфокусирован. Проверяйте поведение браузеров, которые поддерживает ваш интерфейс.
Проверка клавишами Tab и Shift+Tab
Откройте учебную страницу и последовательно нажимайте Tab. На каждом элементе найдите индикатор, затем пройдите тот же путь назад через Shift+Tab. Активируйте ссылку клавишей Enter и убедитесь, что её адрес ведёт к нужному месту.
Повторите проверку в узком окне и при увеличении масштаба. Посмотрите, не обрезает ли рамку родитель с overflow и не закрывает ли её закреплённая панель. Проверка нескольких контролов полезна для упражнения, но не заменяет аудит всей страницы.
Такие интерфейсные задачи можно отработать на курсе фронтенда, а поведение формы проверить с наставником по фронтенду.
