El truco: foco visible

Siempre vale la pena repetirlo: todos los elementos interactivos deben tener un estilo de enfoque. De esa manera, un usuario del teclado puede saber cuándo ha movido el foco a ese elemento.

Pero si se usa :focussolo para esto, tiene un efecto secundario que a mucha gente no le gusta. Significa que cuando haces clic (con el mouse) en un elemento interactivo, verás 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, a lo largo de los años ha molestado a tantas personas que eliminan los estilos de enfoque por completo, lo cual es una pérdida neta de 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:

Voy a empezar añadiendo de forma general la siguiente regla a todas mis hojas de estilo:

:focus:not(:focus-visible) { contorno: ninguno }

Elimina el molesto contorno para los usuarios del ratón, pero lo conserva para los usuarios del teclado, y es ignorado por navegadores que no soportan :focus-visible.

– Lea Verou (@LeaVerou) 28 de septiembre de 2018

Esto fue en respuesta a que Chrome eliminó la función detrás de una bandera. Inteligenteinteligente.

Un par de años después, Chrome lo lanzará sin bandera. Están de acuerdo con la idea de Lea:

Al combinarlo :focus-visible, :focuspuede ir 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, para que se apliquen 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 el que simplemente necesitas confiar. También cubre la idea que Firefox ha tenido durante mucho tiempo :-moz-focusring, pero el comportamiento es lo suficientemente diferente como para que no recomienden usarlo si buscas un comportamiento consistente.
• Matthias Ott escribió en su blog sobre esto con buena información, cómo 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 el tweet de Lea de que pensó que el uso se dispararía cuando se lanzara de verdad. ¡Veamos (y esperemos)!
• Nuestra entrada del almanaque tiene muchos detalles.