В новой версии Chrome Google вводит функцию «Быстрая подсветка фокуса» (Quick Focus Highlight), которая особенно полезна для тех, кто перемещается по сети с помощью клавиатуры или вспомогательных инструментов.
Когда пользователь взаимодействует с элементом, браузер часто показывает индикатор, сигнализирующий о том, что элемент находится в «фокусе». Иногда это называют «кольцом фокуса», потому что браузеры обычно помещают сплошное или пунктирное кольцо вокруг элемента в фокусе.
Кольцо фокуса сигнализирует пользователю, какой элемент будет получать события клавиатуры. Если пользователь перемещается по форме с помощью клавиши Tab, кольцо фокуса указывает, в какое текстовое поле он может вводить текст, или если он сфокусировался на кнопке отправки, он будет знать, что нажатие Enter или пробела активирует эту кнопку.
В течение двух секунд «Быстрая подсветка фокуса» отображает сине-белый контур с голубым свечением вокруг элемента, находящегося в фокусе.
«Быстрая подсветка фокуса» будет отображаться всегда, даже если на странице отключены стили фокуса с помощью CSS. Она также приведет к тому, что все стили фокуса CSS будут совпадать независимо от устройства ввода, которое взаимодействует со страницей.
Чередующиеся цвета используются для обеспечения надлежащего контраста на любом фоне, а временный характер гарантирует, что текст или другой контент страницы не будут скрыты. Google отмечает, что по этой причине функция не является «всегда включенной», но это «может быть изменено в будущем, если пользователи предпочтут, чтобы она всегда оставалась включенной».
Версия Chrome 86 также вводит :focus-visible, чтобы сделать стилизацию фокуса более предсказуемой для разработчиков:
:focus-visible — это CSS-селектор, который позволяет разработчикам использовать тот же эвристический метод, который браузер использует при принятии решения о том, следует ли отображать стандартный индикатор фокуса.
Выпуск 86-й версии браузера начнется в октябре. Новая опция может быть включена в разделе «Настройки» > «Дополнительно» > «Специальные возможности» > «Показывать быструю подсветку для объекта в фокусе». Google отмечает, что разработка «Быстрой подсветки фокуса» и :focus-visible в Chrome заняла годы.
:focus-visible и «Быстрая подсветка фокуса» — результат многолетней работы и отзывов от разработчиков из :focus-visible WICG repo и стандартизирующих органов. Мы хотели бы поблагодарить всех, кто помог сформировать эти функции.