CSS-псевдокласс `:focus-visible`

Псевдокласс :focus-visible применяется, когда элемент соответствует псевдоклассу :focus и пользовательский агент (User Agent) с помощью эвристик определяет, что фокус на элементе должен быть визуально очевиден. (Многие браузеры по умолчанию показывают в этом случае «рамку фокуса».)

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

Попробуйте в действии

label {
  display: block;
  margin-top: 1em;
}

input:focus-visible {
  outline: 2px solid crimson;
  border-radius: 3px;
}

select:focus-visible {
  border: 2px dashed crimson;
  border-radius: 3px;
  outline: none;
}

<form>
  <p>Which flavor would you like to order?</p>
  <label>Full Name: <input name="firstName" type="text" /></label>
  <label
    >Flavor:
    <select name="flavor">
      <option>Cherry</option>
      <option>Green Tea</option>
      <option>Moose Tracks</option>
      <option>Mint Chip</option>
    </select>
  </label>
</form>

Синтаксис

:focus-visible {
  /* ... */
}

:focus против :focus-visible

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

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

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

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

Доступность

Слабое зрение

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

• Доступные визуальные индикаторы фокуса: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

Когнитивные особенности

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

Примеры

Сравнение :focus и :focus-visible

В этом примере представлены три пары элементов управления. Каждая пара состоит из поля ввода 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

Если ваш код должен работать в старых версиях браузеров, которые не поддерживают :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