Diseño · Guía práctica
Cómo detectar un botón que recibe el foco detrás de una cabecera fija
Un recorrido con Tab y Mayús + Tab ayuda a encontrar controles ocultos cuando la página se desplaza.
Abre una página con cabecera fija y avanza con Tab hasta que el navegador tenga que desplazar el contenido. En cada salto observa qué control recibe el foco y si puedes verlo. Recorre también el camino inverso con Mayús + Tab, porque al subir puede aparecer un problema que no se aprecia al bajar.
Ejemplo ficticio. En una lista de resultados, el navegador desplaza la página para enfocar el botón de un resultado anterior. Una cabecera fija de 72 píxeles tapa el botón por completo. Aunque pulsar Intro active el botón, la persona que navega por teclado pierde la referencia de qué va a activar.
El criterio 2.4.11 de WCAG 2.2 exige que el componente enfocado quede al menos parcialmente visible frente a contenido creado por el sitio. En el ejemplo, registra el botón y la cabecera como elementos separados. Si el botón sigue visible pero su indicador se distingue mal, comprueba también el indicador de foco.
Para reproducir el fallo, anota el ancho de la ventana, la dirección en que navegabas y el control anterior al salto. Prueba asimismo con un pie fijo o un aviso persistente, porque también pueden cubrir el elemento cuando el navegador lo acerca al borde de la ventana.
Tras ajustar el diseño, vuelve al mismo punto y repite los dos recorridos. El W3C menciona el margen interior de desplazamiento como una forma de reservar espacio para las capas fijas. Comprueba además que la reserva sigue siendo suficiente cuando la cabecera ocupa más altura en una ventana estrecha.
Comprobación práctica
- Avanza con Tab
- Retrocede con Mayús + Tab
- Identifica el control cubierto
- Repite tras ajustar la cabecera