El indicador de enfoque, a menudo representado por un "anillo de enfoque", identifica el elemento enfocado en tu página. Para los usuarios que no pueden o no quieren usar un mouse, este indicador es extremadamente importante, ya que actúa como sustituto de un puntero del mouse.
Si el indicador de enfoque predeterminado del navegador no coincide con tu diseño, puedes usar CSS para cambiar su estilo. Recuerda tener en cuenta a tus usuarios.
Usa :focus para mostrar siempre un indicador de enfoque
La seudoclase :focus se aplica a los elementos enfocados, independientemente del método de entrada o el dispositivo (como un mouse, un teclado o una pluma stylus) que se esté usando.
Por ejemplo, el siguiente <div> tiene un tabindex que lo hace enfocable, con un estilo personalizado para su estado :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Sin importar qué dispositivo uses, el <div> se ve igual cuando está enfocado.
Lamentablemente, los navegadores pueden ser incoherentes en la forma en que aplican el enfoque. El hecho de que un elemento reciba el enfoque puede depender del navegador y del sistema operativo.
Por ejemplo, el siguiente <button> tiene CSS personalizado para su estado :focus.
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 haces clic en <button> en Safari en macOS. Esto se debe a que, en Safari, el elemento no recibe el foco cuando haces clic en él.
El comportamiento del enfoque es incoherente. Prueba tu página en diferentes dispositivos y con diferentes entradas para asegurarte de que los estilos de enfoque sean aceptables para tus usuarios.
Usa :focus-visible para mostrar de forma selectiva un indicador de enfoque
La seudoclase :focus-visible se aplica cuando un elemento recibe el enfoque y el navegador determina (con heurísticas) que mostrar un indicador de enfoque sería beneficioso para el usuario. En particular, si la interacción del usuario más reciente fue con un teclado y la presión de la tecla no incluyó una tecla Meta, ALT, OPTION o CONTROL, entonces :focus-visible coincidirá.
En el siguiente ejemplo, el botón muestra un indicador de enfoque de forma selectiva. Si usas un mouse para hacer clic, los resultados son diferentes a si primero usas un teclado para desplazarte con la tecla Tab hasta él.
button:focus-visible {
outline: 4px dashed orange;
}
Usa :focus-within para aplicar estilo al elemento principal de un elemento enfocado
La seudoclase :focus-within se aplica a un elemento cuando el elemento en sí recibe el enfoque o cuando un elemento secundario recibe el enfoque. Se puede usar para destacar una región de la página y atraer la atención del usuario hacia esa área.
Por ejemplo, un formulario recibe el enfoque cuando se selecciona el formulario en sí y también cuando se selecciona cualquiera de sus botones de selección.
form:focus-within {
background: #ffecb3;
}
Cuándo mostrar un indicador de enfoque
Una buena pregunta que puedes hacerte es: "Si hicieras clic en este control mientras usas un dispositivo móvil, ¿esperarías que se mostrara un teclado?".
- Si es así: El control siempre debe mostrar un indicador de enfoque, independientemente del dispositivo de entrada. Por ejemplo, esto casi siempre se cumple para el elemento
<input type="text">. El usuario debe enviar entrada al elemento con el teclado, independientemente de cómo el elemento de entrada obtenga el enfoque. - Si no: El control puede optar por mostrar de forma selectiva un indicador de enfoque. Por ejemplo, cuando un usuario hace clic en un
<button>con un mouse o en una pantalla táctil, se completa la acción. Es posible que no sea necesario un indicador de enfoque. Sin embargo, si el usuario navega con un teclado, es útil mostrar un indicador de enfoque para que pueda decidir si desea activar el control con ENTER o SPACE.
Evita outline: none
La forma en que los navegadores deciden cuándo dibujar un indicador de enfoque es, francamente, muy confusa. Cambiar la apariencia de un elemento <button> con CSS o darle a un elemento un tabindex hace que se active el comportamiento predeterminado del anillo de enfoque del navegador.
A veces, los desarrolladores quitan el indicador de enfoque con CSS:
/* Don't do this!!! */
:focus {
outline: none;
}
Una mejor manera de solucionar este problema es combinar :focus y el polyfill de :focus-visible. El primer bloque de código muestra cómo funciona el polyfill, y la app de ejemplo que se encuentra debajo proporciona un ejemplo del uso del polyfill para cambiar el indicador de enfoque en un botón.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}