Foco visible

Silktide comprueba que los controles de tu página - enlaces, botones y campos de formulario - cambian de forma visible cuando se seleccionan con el teclado. Sin un cambio visible, las personas que usan el teclado no pueden saber dónde están en la página.

Puedes probarlo tú mismo: carga una página y pulsa la tecla Tab repetidamente. Cada control en el que te detengas debería cambiar su apariencia, por ejemplo, mostrando un contorno o un color de fondo diferente.

Todos los controles estándar del navegador muestran el foco de forma predeterminada, así que un fallo aquí casi siempre significa que una hoja de estilos ha desactivado el indicador predeterminado, o que se creó un control personalizado sin uno.

Por qué es importante

Las personas que no pueden usar un ratón navegan con la tecla Tab, y el indicador de foco es su única forma de saber en qué control están. Cuando un diseñador lo elimina - a menudo porque el contorno predeterminado se considera feo - las personas que usan el teclado se quedan pulsando teclas a ciegas, sin idea de qué se activará al pulsar Intro.

Cómo solucionarlo

Localiza dónde tu desactiva el foco, normalmente con una regla como outline: none o outline: 0, y elimínala.
Si sustituyes el contorno predeterminado, proporciona una alternativa clara en el estado :focus:

\/* Restaura un indicador visible para los campos con foco *\/ 
input:focus {
  outline: 2px solid #396196;
}

Proporciona a los controles personalizados, como menús desplegables propios o deslizadores, un estilo de foco explícito: no tienen uno por defecto.

Para saber cuán destacado debe ser el indicador, consulta Foco claro, el complemento más estricto de esta comprobación.

Cómo lo comprueba Silktide

Simular a un usuario de teclado avanzando con Tab por cada elemento enfocable de la página, omitiendo los elementos que has excluido de la comprobación, los elementos ocultos para usuarios con visión, y los elementos con un tabindex de -1.
Comparar los estilos de cada elemento en sus estados con y sin foco.
Señalar los elementos cuya apariencia no cambia de ninguna manera que un usuario con visión pudiera distinguir cuando reciben .

Solución de problemas

El estilo de foco requiere JavaScript para aparecer

Los estilos de foco deben definirse únicamente en CSS. Si el foco se aplica mediante - por ejemplo, un script que añade una clase - es posible que Silktide no lo detecte, y que no funcione con tecnologías de apoyo sin un teclado físico. Prueba a desactivar JavaScript y a avanzar con Tab por la página para confirmarlo.

Estilos de foco que no podemos medir

Algunas formas de implementar el foco no pueden detectarse automáticamente:

Foco dibujado con pseudoelementos como ::before o ::after.
Foco aplicado mediante :focus-within en un contenedor.
Estilos de foco en cascada a elementos hijos, 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 inesperados son enfocables

Etiquetas como <div> o <span> se vuelven enfocables cuando se les asigna un tabindex de 0 o superior, que es como los controles personalizados admiten el uso del teclado. Si una aparece en tus resultados, realmente es alcanzable con el teclado y necesita un estilo de foco. Consulta tabindex en MDN.