Индикатор фокуса (часто обозначаемый «кольцом фокусировки») идентифицирует элемент на вашей странице, на котором в данный момент находится фокус. Для пользователей, которые не могут использовать мышь, этот индикатор чрезвычайно важен, поскольку он заменяет указатель мыши.
Если индикатор фокуса браузера по умолчанию не соответствует вашему дизайну, вы можете изменить его стиль с помощью 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 применяется каждый раз, когда элемент получает фокус, и браузер с помощью эвристики определяет, что отображение индикатора фокуса будет полезно для пользователя. В частности, если последнее взаимодействие с пользователем происходило с помощью клавиатуры и нажатие клавиши не включало мета-клавишу, клавишу 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 . Первый блок кода ниже демонстрирует, как работает полифил, а пример приложения под ним представляет собой пример использования полифилла для изменения индикатора фокуса на кнопке.
/*
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 {
…
}