:focus-visible

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом :-moz-focusring.

Синтаксис

:focus-visible

Пример

Базовый пример

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

<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
input, button {
  margin: 10px;
}

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

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

Выборочное отображение индикатора фокусировки

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

<custom-button tabindex="0" role="button">Click Me</custom-button>
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Обеспечьте резервный стиль для бразеров, 
которые не поддреживают: focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}

Polyfill

You can polyfill :focus-visible using focus-visible.js.

Accessibility concerns

Low vision

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

Cognition

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

Specifications

Specification Status Comment
Selectors Level 4
Определение ':focus-visible' в этой спецификации.
Рабочий черновик Initial definition.

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:focus-visibleChrome Полная поддержка 67
Отключено
Полная поддержка 67
Отключено
Отключено From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 79
Отключено
Полная поддержка 79
Отключено
Отключено From version 79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Firefox Полная поддержка 4
Альтернативное имя
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-focusring
IE Нет поддержки НетOpera Полная поддержка 54
Отключено
Полная поддержка 54
Отключено
Отключено From version 54: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 67
Отключено
Полная поддержка 67
Отключено
Отключено From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 4
Альтернативное имя
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-focusring
Opera Android Полная поддержка 48
Отключено
Полная поддержка 48
Отключено
Отключено From version 48: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.

See also