:focus-visible

This translation is incomplete. Please help translate this article from English

La pseudo-clase :focus-visible  se aplica mientras un elemento coincide con la pseudo-clase :focus y el  UA (Agente de Usuario) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.

Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).

Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — :-moz-focusring.

Sintaxis

:focus-visible

Ejemplos

Ejemplos básicos

En este ejemplo, el selector  :focus-visible usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo :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;
}

Mostrando selectivamente el indicador de enfoque

Un control personalizado, como un botón de elemento personalizado, puede utilizar :focus-visible para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como <button>.

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

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :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 usando focus-visible.js.

Problemas de accesibilidad

Baja visión

Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). WCAG 2.1 SC 1.4.11 Contraste Sin Texto requiere que el indicador de enfoque visual sea al menos 3 a 1.

Cognición

Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.

Especificaciones

Especificación Estado Comentario
Selectors Level 4
La definición de ':focus-visible' en esta especificación.
Working Draft Initial definition.

Compatibilidad de navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:focus-visibleChrome Soporte completo 67
Deshabilitado
Soporte completo 67
Deshabilitado
Deshabilitado 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 Soporte completo 79
Deshabilitado
Soporte completo 79
Deshabilitado
Deshabilitado From version 79: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Firefox Soporte completo 4
Nombre alternativo
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-focusring
IE Sin soporte NoOpera Soporte completo 54
Deshabilitado
Soporte completo 54
Deshabilitado
Deshabilitado From version 54: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari Sin soporte NoWebView Android Sin soporte NoChrome Android Soporte completo 67
Deshabilitado
Soporte completo 67
Deshabilitado
Deshabilitado 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 Soporte completo 4
Nombre alternativo
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :-moz-focusring
Opera Android Soporte completo 48
Deshabilitado
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.

Vea también