:focus-visible

Этот селектор полезен для предоставления различного индикатора фокуса в зависимости от способа ввода пользователя (мышь или клавиатура).

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

Браузеры больше не визуально отображают фокус (например, рисованием «рамки фокуса») вокруг каждого элемента, когда у него есть фокус. Вместо этого они используют различные эвристические правила, чтобы предоставлять индикаторы фокуса только тогда, когда это наиболее полезно для пользователя. Например, когда кнопка нажимается с помощью указательного устройства, фокус обычно не отображается визуально, но когда поле ввода текста, требующее ввода пользователем, получает фокус, фокус отображается. Хотя стили фокуса всегда требуются, когда пользователи перемещаются по странице с помощью клавиатуры или когда фокус управляется с помощью сценариев, стили фокуса не требуются, когда пользователь знает, куда он помещает фокус, например, когда он использует указательное устройство, такое как мышь или палец, чтобы физически установить фокус на элементе, если только этот элемент не продолжает нуждаться во внимании пользователя.

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

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

Убедитесь, что визуальный индикатор фокуса виден людям со слабым зрением. Это также будет полезно для тех, кто использует экран в ярко освещенном пространстве (например, на улице под солнцем). WCAG 2.1 SC 1.4.11 Контрастность элементов без текста требует, чтобы визуальный индикатор фокуса имел отношение контрастности не менее 3:1.

• Доступные визуальные индикаторы фокуса: Добавьте фокус на свой сайт! Советы по проектированию полезных и удобных индикаторов фокуса

Не всегда очевидно, почему индикатор фокуса появляется и исчезает, если человек использует смешанные способы ввода. Для пользователей с когнитивными нарушениями или с меньшим уровнем технологической грамотности это отсутствие согласованного поведения интерактивных элементов может быть запутанным.

Этот пример представляет три пары элементов управления. Каждая пара состоит из поля ввода text и кнопки.

• Первая пара не добавляет никаких пользовательских стилей для состояний фокуса и демонстрирует стандартный случай.
• Вторая пара добавляет стили, используя псевдокласс :focus.
• Третья пара добавляет стили, используя псевдокласс :focus-visible.

<input type="text" value="Default styles" /><br />
<button>Default styles</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">:focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" /><br />
<button class="focus-visible-only">:focus-visible</button>

input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

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

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

Это показывает, как :focus-visible позволяет разработчику следовать логике браузера при определении, когда должна отображаться рамка фокуса.

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

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">
  Button without fallback
</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

• :focus
• :focus-within
• Полифилл для :focus-visible