El indicador de enfoque (a menudo representado por un "anillo de enfoque") identifica el estado centrado en tu página. Para los usuarios que no pueden usar un mouse, este es sumamente importante porque actúa como sustituto de la puntero del mouse.
Si el indicador de enfoque predeterminado del navegador no coincide con tu diseño, puedes usar CSS para cambiar el estilo. Recuerda tener en cuenta a los usuarios de tu teclado.
Usa :focus para mostrar siempre un indicador de enfoque
La :focus
se aplica cada vez que un elemento se enfoca, independientemente de la entrada
dispositivo (mouse, teclado, pluma stylus, etc.) o el método utilizado para enfocarlo. Por ejemplo:
el <div> que aparece a continuación tiene un tabindex que lo hace enfocable. También cuenta con un
estilo personalizado para su estado :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Independientemente de que uses un mouse para hacer clic en ella o un teclado para acceder a ella,
<div> siempre se verá igual.
Desafortunadamente, los navegadores pueden ser inconsistentes con la forma en que aplican el foco. Si un elemento no recibe el foco puede depender del navegador y del sistema en un sistema de archivos.
Por ejemplo, el <button> que aparece a continuación también tiene un estilo personalizado para su :focus.
para cada estado.
button:focus {
outline: 4px dashed orange;
}
Si haces clic en <button> con un mouse en Chrome en macOS, deberías ver
su estilo de enfoque personalizado. Sin embargo, no verás el estilo de enfoque personalizado si
Haz clic en <button> en Safari para macOS. Esto se debe a que, en
Safari, el elemento no se enfoca cuando haces clic en él.
Debido a que el comportamiento del enfoque es incoherente, puede que se requieran algunas pruebas. en diferentes dispositivos para garantizar que tus estilos de enfoque sean aceptables para los usuarios.
Usa :focus-visible para mostrar un indicador de enfoque de manera selectiva
La nueva herramienta
:focus-visible
se aplica cada vez que un elemento recibe el foco y el
navegador determina mediante una heurística que mostrar un indicador de enfoque sería
beneficiosos para el usuario. En particular, si la interacción más reciente del usuario
fue a través del teclado y cuando se presionaba la tecla no se incluía un meta, ALT / OPTION,
o la tecla CONTROL, :focus-visible coincidirá.
El botón del siguiente ejemplo mostrará un indicador de enfoque de forma selectiva. Si haces clic con el mouse, los resultados son diferentes a los que usas un teclado para acceder a él.
button:focus-visible {
outline: 4px dashed orange;
}
Usa :focus-within para aplicar diseño al elemento superior de un elemento enfocado
El
:focus-within
se aplica a un elemento, ya sea cuando este recibe
o cuando otro elemento dentro de él lo recibe.
Se puede usar para resaltar una parte de la página y dibujar la la atención del usuario en esa área. Por ejemplo, el siguiente formulario recibe el foco cuando se selecciona el formulario y también cuando cualquiera de sus botones de selección seleccionado.
form:focus-within {
background: #ffecb3;
}
Cuándo mostrar un indicador de enfoque
Una buena regla general es preguntarse: "Si haces clic en este control mientras usando un dispositivo móvil, ¿esperarías que mostrara un teclado?"
Si la respuesta es "sí", entonces el control probablemente siempre debería mostrar un enfoque
independientemente del dispositivo de entrada que se use para enfocarlo. Un buen ejemplo
el elemento <input type="text"> El usuario deberá enviar la entrada al
elemento a través del teclado, independientemente de cómo el elemento de entrada recibió originalmente
el foco está puesto, por lo que es útil mostrar siempre un indicador de enfoque.
Si la respuesta es "no", el control puede elegir mostrar de forma selectiva
indicador. Un buen ejemplo es el elemento <button>. Si un usuario hace clic en él con
un mouse o una pantalla táctil, la acción se completó y es posible que un indicador
ser necesarias. Sin embargo, si el usuario navega con un teclado, es útil
para mostrar un indicador de enfoque para que el usuario pueda decidir si desea o no
Haz clic en el control con las teclas ENTER o SPACE.
Evita outline: none
La forma en que los navegadores deciden cuándo dibujar un indicador de enfoque es, francamente, muy
confusas. Cambiar la apariencia de un elemento <button> con CSS o dar
un elemento tabindex hará que el comportamiento del anillo de enfoque predeterminado del navegador
su participación.
Un antipatrón muy común consiste en quitar el indicador de enfoque mediante CSS, como las siguientes:
/* Don't do this!!! */
:focus {
outline: none;
}
Una mejor manera de solucionar este problema es usar una combinación de :focus y
el polyfill :focus-visible. El primer bloque de código que aparece a continuación demuestra cómo
funciona el polyfill, y la app de ejemplo que aparece debajo proporciona un ejemplo de cómo usar
el polyfill para cambiar el indicador de enfoque de un botón.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}