Al recibir el foco
Simplemente desplazarse hasta un elemento, por ejemplo al pulsar Tab, nunca debe desencadenar un cambio importante como cargar una página nueva, enviar un formulario o abrir una ventana emergente.
Esto es una : la automatización no puede determinar de forma fiable, a partir de JavaScript minimizado o de un framework, si un controlador de foco cambia el contexto, así que Silktide muestra el aviso en cada página y una persona lo confirma tabulando.
Por qué es importante
Las personas que usan el teclado mueven el foco por la página para explorarla, del mismo modo que quienes usan el ratón mueven el puntero: llegar a un control no es lo mismo que elegir usarlo. Si con solo tabular en un cuadro de búsqueda se recarga la página, o al llegar a un botón se abre un cuadro de diálogo, las personas que usan el teclado y los son llevadas a otro lugar sin haberlo solicitado, a menudo perdiendo su posición y su trabajo. Las personas con discapacidades motoras que navegan despacio, elemento a elemento, se topan con estas trampas constantemente.
Este es el criterio de conformidad 3.2.1 de (Al recibir el foco), un requisito de , parte del nivel de conformidad más básico.
Qué comprobar
- Recorre con Tabulador todos los controles que pueden recibir el foco en la página.
- Confirma que solo con el foco nunca se navega, se envía un formulario ni se abre un cuadro de diálogo o una ventana nueva.
- Los controladores de foco que solo resaltan un campo, muestran una pista o preparan datos en segundo plano están bien.
Si el foco nunca cambia el contexto, el resultado.
Cómo solucionarlo
- Mueve la acción fuera del controlador de foco. La navegación, el envío y los diálogos deben activarse mediante una acción explícita como un
click, Enter o un cambio que la persona visitante confirme. - Usa controladores de foco solo para efectos no disruptivos.
\/\/ Problema: al llegar al campo se navega inmediatamente
searchBox.addEventListener('focus', () => {
window.location.href = '\/search';
});
\/\/ Solución: navegar solo cuando la persona usuaria decide actuar
searchBox.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
window.location.href = '\/search';
}
});
Cómo lo prueba Silktide
Silktide no puede detectar de forma fiable los cambios de contexto provocados por el foco inspeccionando el código fuente de los controladores de eventos; los frameworks y la minificación lo vuelven frágil; por eso, esta comprobación genera un aviso de revisión por página que describe qué verificar al tabular.