G223Diseñar un indicador de foco propio y muy visible

Por qué es importante

Quien usa el teclado necesita saber en todo momento dónde está. El contorno que pone el navegador por defecto suele ser fino y, sobre algunos colores, casi no se ve.

Esto afecta sobre todo a personas con baja visión y a quienes usan teclado o pulsadores por discapacidad motriz. Un indicador grueso y contrastado les evita perderse en menús, formularios o fichas de producto.

Cómo se hace

1. Defina en CSS un estilo de foco para todos los elementos interactivos, por ejemplo con :focus-visible.
2. Hágalo grueso: su área debe ser al menos la de un borde de 2 píxeles alrededor del elemento. Un contorno de 3 píxeles suele bastar.
3. Asegure un contraste de al menos 4,5 a 1 entre el aspecto con foco y sin foco.
4. Elija un color que destaque sobre el fondo: amarillo sobre fondo oscuro, rojo o azul oscuro sobre fondo claro.
5. Evite que cabeceras fijas, banners o ventanas tapen el elemento con foco.

Cómo comprobarlo

1. Recorra la página con la tecla Tab.
2. Compruebe que cada elemento muestra un indicador de foco visible y que nada lo tapa.
3. Verifique que el indicador es al menos tan grande como un borde de 2 píxeles alrededor del elemento.
4. Mida con un analizador de contraste que el cambio entre foco y sin foco llega a 4,5 a 1.

Ejemplo

Un contorno amarillo de 3 píxeles para los enlaces y botones sobre un fondo oscuro.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 2px;
}