Foco claro
Silktide comprueba que los controles de tu página (enlaces, botones y campos de formulario) cambien su apariencia con suficiente claridad cuando se seleccionan con el teclado. No basta con que el cambio simplemente exista; debe ser lo suficientemente grande y con alto contraste como para verse realmente.
Esta es una versión más estricta de Foco visible: aquella comprobación pregunta si existe algún indicador de foco, mientras que esta mide si el indicador es lo bastante prominente.
Puedes probarlo tú mismo: carga una página y pulsa repetidamente la tecla Tabulador. Cada control en el que aterrices debería cambiar de forma visible, por ejemplo, mostrando un contorno definido o un fondo contrastado.
Por qué es importante
Las personas que navegan con el teclado —incluidas muchas con discapacidades motoras y usuarias de dispositivos conmutadores (switch)— dependen de ver dónde está el . Un indicador de foco que existe técnicamente pero es tenue, fino o de bajo contraste es tan inútil como no tener ninguno: la persona usuaria pierde su ubicación en la página y no puede saber qué control se activará al pulsar Intro.
Cómo solucionarlo
La solución más simple y fiable es un contorno sólido alrededor del control enfocado, de al menos 2 píxeles de grosor, en un color que contraste tanto con el control como con su entorno.
Un indicador bicolor garantiza la visibilidad independientemente del fondo:
\/* Un contorno transparente mantiene un indicador en el modo de colores forzados (forced-colors) *\/
:focus {
outline: 2px solid transparent;
\/* Halo claro + anillo oscuro: uno de los dos siempre contrasta *\/
box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}
Este enfoque proviene de la técnica WCAG C40.
Evita indicadores a lo largo de un único borde, como un borde inferior: que sean lo bastante grandes depende de la longitud de ese borde, que varía en los enlaces de texto.
Cómo lo prueba Silktide
- Simular a una persona usuaria de teclado que avanza con Tab por cada elemento enfocable de la página, omitiendo los elementos que hayas excluido de la comprobación, los elementos ocultos para usuarios con visión y los elementos con un
tabindexde -1. - Comparar los estilos de cada elemento en sus estados con foco y sin foco.
- Aprueban los elementos que mantienen el contorno de foco predeterminado del navegador, o cuyo color de fondo cambia con un contraste de al menos 3:1 entre ambos estados.
- En caso contrario, medir los contornos, bordes y sombras de ambos estados y calcular el área que cambia con suficiente contraste. Para pasar, esa área debe ser al menos tan grande como un perímetro de 2 píxeles de grosor alrededor del elemento, según el requisito 2.4.13 de .
Solución de problemas
El estilo de foco necesita JavaScript para mostrarse
Los estilos de foco deben definirse únicamente en . Si el foco se aplica mediante —por ejemplo, con un script que añade una clase—, es posible que Silktide no lo detecte y que no funcione para tecnologías de asistencia sin un teclado físico. Prueba a desactivar JavaScript y a desplazarte por la página con Tabulador para confirmarlo.
Estilos de foco que no podemos medir
Algunas formas de implementar el foco no pueden detectarse ni medirse automáticamente:
- Foco dibujado con pseudoelementos como
::beforeo::after. - Foco aplicado mediante
:focus-withinen un contenedor. - Estilos de foco en cascada a elementos secundarios, como un
<span>dentro de un enlace. Algunos de estos casos se detectan, pero no todas las variaciones.
Los elementos que usan estas técnicas se omiten en lugar de marcarse.
Elementos sobre imágenes o con fondos impredecibles
El contraste se calcula respecto a un color de fondo conocido. Cuando un elemento está sobre una imagen, o se posiciona fuera de su contenedor y no se puede determinar su fondo, Silktide lo omite en lugar de suponerlo.
Elementos inesperados son enfocables
Etiquetas como <div> o <span> se vuelven enfocables cuando se les da un tabindex de 0 o superior, que es como los controles personalizados admiten el uso con teclado. Si aparece una en tus resultados, realmente es alcanzable con el teclado y necesita un estilo de foco. Consulta tabindex en MDN.