Siempre vale la pena repetirlo: todos los elementos interactivos deben tener un estilo de enfoque. De esa manera, un usuario de teclado puede saber cuándo se ha movido el foco a ese elemento.
Pero si usas :focus solo para esto, tiene un efecto secundario que a muchas personas no les gusta. Significa que cuando hace clic (con el mouse) en un elemento interactivo, verá el estilo de enfoque. Podría decirse que no necesita esa retroalimentación como usuario del mouse, porque simplemente movió el cursor allí e hizo clic. Independientemente de lo que piense de eso, a tanta gente le ha molestado a lo largo de los años que eliminan por completo los estilos de enfoque, lo que es una pérdida neta complicada para la accesibilidad en la web.
¿Qué pasaría si pudiéramos aplicar estilos de enfoque solo cuando se usa el teclado para enfocar algo, no el mouse? Lea Verou señaló esto hace unos años:
Comenzaré a agregar la siguiente regla a todas mis hojas de estilo:
: focus: not (: focus-visible) {esquema: ninguno}
Elimina el molesto esquema para los usuarios del mouse, pero lo conserva para los usuarios del teclado, y los navegadores que no admiten: focus-visible lo ignoran.
– Lea Verou (@LeaVerou) 28 de septiembre de 2018
Eso fue en respuesta a que Chrome dejó caer la función detrás de una bandera. Inteligente inteligente.
Avanzando un par de años, Chrome lo lanzará sin una bandera. Están de acuerdo con la idea de Lea:
Combinando :focus-visible con :focus puede llevar las cosas un paso más allá y proporcionar diferentes estilos de enfoque según el dispositivo de entrada del usuario. Esto puede resultar útil si desea que el indicador de enfoque dependa de la precisión del dispositivo de entrada:
/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
outline: 4px dashed black;
}
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
outline: none;
box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}Podría sugerir probar esos selectores sin el button, ¡haciéndolos aplicados globalmente!
Hay más en qué profundizar, así que vincularé algunas cosas más aquí:
- La publicación del blog de Chromium cubre la heurística del selector. Es complicado. Es como si hubiera un algoritmo para determinar si
:focus-visibleva a coincidir o no, en lo que solo debe confiar en gran medida. También cubre la idea de que Firefox ha tenido durante mucho tiempo:-moz-focusring, pero el comportamiento es lo suficientemente diferente como para que no recomienden usarlo si estás buscando un comportamiento consistente. - Matthias Ott escribió en su blog al respecto con buena información, como usar el polyfill oficial y cómo ver los estilos correctamente en DevTools (hay una nueva casilla de verificación para ello).
- Hemos cubierto esto antes. En eso, notamos que Lea Pío que pensó que el uso explotaría cuando se enviara de verdad. ¡Veamos (y esperemos)!
- Nuestra entrada de almanaque tiene muchos detalles.