Псевдокласс :focus-visible в CSS отличается от :focus тем, что он применяется только к элементам, которые сфокусированы с помощью клавиатуры и должны быть видимы. 12

Псевдокласс :focus распространяет стили на любой элемент, который получает фокус, независимо от способа ввода. 2 Это включает события фокуса от навигации с клавиатуры, щелчков мыши и сенсорного взаимодействия. 2

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

Таким образом, использование :focus-visible помогает улучшить взаимодействие с пользователем, так как стили применяются только при фокусировке элемента с помощью ввода с клавиатуры, а не при фокусировке с помощью мыши или сенсорного ввода. 1