:focus-visible
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
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
Error: could not find syntax for this item
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.
- Indicadores de enfoque visual accesibles: Déle a su sitio un poco de enfoque! Consejos para diseñar indicadores de enfoque útiles y utilizables
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
Specification |
---|
Selectors Level 4 # the-focus-visible-pseudo |
Compatibilidad con navegadores
BCD tables only load in the browser