Индикатор фокуса (часто обозначаемый как «фокусное кольцо») определяет текущий сфокусированный элемент на вашей странице. Для пользователей, которые не могут использовать мышь, этот индикатор чрезвычайно важен , поскольку он действует как замена указателю мыши.
Если индикатор фокуса браузера по умолчанию конфликтует с вашим дизайном, вы можете использовать CSS для его изменения. Просто не забудьте помнить о пользователях клавиатуры!
Используйте :focus , чтобы всегда показывать индикатор фокуса
Псевдокласс :focus применяется всякий раз, когда элемент находится в фокусе, независимо от устройства ввода (мышь, клавиатура, стилус и т. д.) или метода, используемого для фокусировки. Например, <div> ниже имеет tabindex , который делает его фокусируемым. Он также имеет пользовательский стиль для своего состояния :focus :
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Независимо от того, используете ли вы мышь, чтобы щелкнуть по нему, или клавиатуру, чтобы перейти к нему, <div> всегда будет выглядеть одинаково.
К сожалению, браузеры могут быть непоследовательны в том, как они применяют фокус. Получает ли элемент фокус или нет, может зависеть от браузера и операционной системы.
Например, <button> ниже также имеет пользовательский стиль для своего состояния :focus .
button:focus {
outline: 4px dashed orange;
}
Если вы нажмете на <button> мышкой в Chrome на macOS, вы должны увидеть его пользовательский стиль фокуса. Однако вы не увидите пользовательский стиль фокуса, если вы нажмете на <button> в Safari на macOS. Это связано с тем, что в Safari элемент не получает фокус, когда вы нажимаете на него.
Поскольку поведение фокуса непостоянно, может потребоваться небольшое тестирование на разных устройствах, чтобы убедиться, что ваши стили фокуса приемлемы для пользователей.
Используйте :focus-visible для выборочного отображения индикатора фокуса.
Новый псевдокласс :focus-visible применяется всякий раз, когда элемент получает фокус, и браузер определяет с помощью эвристики, что отображение индикатора фокуса будет полезным для пользователя. В частности, если последнее взаимодействие пользователя было с помощью клавиатуры и нажатие клавиши не включало клавишу meta, ALT / OPTION или CONTROL , то :focus-visible будет соответствовать.
Кнопка в примере ниже выборочно покажет индикатор фокуса. Если вы используете мышь, чтобы щелкнуть по ней, результаты будут отличаться от тех, если вы сначала используете клавиатуру, чтобы перейти к ней.
button:focus-visible {
outline: 4px dashed orange;
}
Используйте :focus-within для стилизации родительского элемента сфокусированного элемента.
Псевдокласс :focus-within применяется к элементу либо тогда, когда сам элемент получает фокус, либо когда фокус получает другой элемент внутри этого элемента.
Его можно использовать для выделения области страницы, чтобы привлечь внимание пользователя к этой области. Например, форма ниже получает фокус как при выборе самой формы, так и при выборе любого из ее переключателей.
form:focus-within {
background: #ffecb3;
}
Когда отображать индикатор фокусировки
Хорошее практическое правило — спросить себя: «Если бы вы нажали на этот элемент управления, используя мобильное устройство, ожидали бы вы, что он отобразит клавиатуру?»
Если ответ «да», то элемент управления, вероятно, всегда должен отображать индикатор фокуса, независимо от устройства ввода, используемого для фокусировки. Хорошим примером является элемент <input type="text"> . Пользователю необходимо будет отправлять ввод в элемент с помощью клавиатуры независимо от того, как элемент ввода изначально получил фокус, поэтому полезно всегда отображать индикатор фокуса.
Если ответ «нет», то элемент управления может выбрать выборочное отображение индикатора фокуса. Хорошим примером является элемент <button> . Если пользователь нажимает на него мышью или сенсорным экраном, действие завершается, и индикатор фокуса может не потребоваться. Однако, если пользователь осуществляет навигацию с помощью клавиатуры, полезно отображать индикатор фокуса, чтобы пользователь мог решить, хочет ли он щелкнуть элемент управления с помощью клавиш ENTER или SPACE .
Избегайте outline: none
То, как браузеры решают, когда рисовать индикатор фокуса, честно говоря, очень запутанно. Изменение внешнего вида элемента <button> с помощью CSS или присвоение элементу tabindex приведет к срабатыванию поведения фокусного кольца браузера по умолчанию.
Очень распространенным антишаблоном является удаление индикатора фокуса с помощью CSS, например:
/* Don't do this!!! */
:focus {
outline: none;
}
Лучший способ обойти эту проблему — использовать комбинацию :focus и :focus-visible polyfill. Первый блок кода ниже демонстрирует, как работает polyfill, а пример приложения под ним дает пример использования polyfill для изменения индикатора фокуса на кнопке.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}