La pelea más antigua en CSS: los usuarios del mouse odian el anillo de enfoque que se muestra con cada clic, los usuarios del teclado mueren sin él. Los navegadores resolvieron la llamada de juicio con la pseudoclase visible de enfoque: coincide con el enfoque de estilo de teclado y omite el enfoque de estilo de mouse.
/* default: remove only for pointer focus, not for keyboard */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}las tres reglas
- Nunca retire el indicador visible para los usuarios de teclados: con focus-visible, quitar el anillo y reemplazarlo manualmente brinda control total del diseño.
- El navegador elige la heurística: coincidencias visibles para la navegación con el teclado, combinadas para omitir los clics del mouse en la mayoría de las interacciones.
- Cada control enfocado todavía necesita su anillo: el enfoque visible se ajusta al anillo, no crea un comportamiento de enfoque.
Una parte sutil a respetar.
Enfoque programático: la llamada focus() en un enlace saltado o en un destino de mensaje de error. Los navegadores difieren en cuanto a si dicho foco es visible; defina la interacción en su hoja de estilo explícitamente y pruebe una vez con la pestaña y una vez haciendo clic, prefiera visible para ambos en caso de duda. Un timbre perdido en un enlace omitido es un informe del lector de pantalla, no un accidente de diseño.
Este sitio mantiene el anillo predeterminado de la plataforma, sintonizado con un color de marca claro. Las WCAG 2.2 hicieron del enfoque visible un criterio de éxito explícito; la pseudoclase que hace felices a ambos públicos es muy interesante y más antigua que la controversia que resuelve.