ACCESIBILIDAD ≠ OVERLAY · 38
Foco de teclado visible cuando una cabecera fija tapa el siguiente paso
📅 11 de noviembre de 2026 · ⏱ 7 min de lectura
Al pulsar Tab, el navegador puede mover el foco a un control que queda detrás de una cabecera fija. La página sigue respondiendo, pero la persona pierde la referencia visual que necesita para continuar.
01. La prueba de una reserva
Abre una página de reservas y elige una fecha usando el teclado. Al avanzar con Tab, esperas encontrar el enlace que explica los cambios o el botón para continuar. El documento se desplaza unos píxeles y el contorno desaparece. El foco ha llegado al control correcto, pero la cabecera que permanece arriba lo cubre. Si pulsas Intro, puedes cambiar de paso sin haber podido comprobar qué ibas a activar.
Esta situación resulta fácil de pasar por alto cuando se revisa el diseño con ratón. El puntero señala la posición elegida y permite ajustar el desplazamiento antes de actuar. Con teclado, el navegador mueve el foco según el orden del documento y decide cuándo desplazar la vista. La prueba debe conservar esa secuencia. Desplazar la página manualmente antes de mirar puede ocultar el fallo que queremos reproducir.
02. Distingue el foco, su indicador y el orden
El foco identifica el elemento que recibe la entrada del teclado. El indicador es la señal visual que permite localizarlo. El orden determina qué control viene después. Una cabecera superpuesta puede tapar un botón con un indicador perfectamente definido. A la inversa, un botón puede estar a la vista y no mostrar ninguna señal al recibir el foco. También puede verse con claridad un control al que se llega en un momento incoherente de la tarea.
Para aislar el problema, anota qué control esperabas y cuál recibe el foco. Si tienes acceso a las herramientas del navegador, consulta el elemento activo sin cambiar el foco de la página o repite la secuencia con el inspector preparado. Inspecciona el rectángulo del control y el de la capa que se superpone. Una captura ayuda a mostrar el síntoma. Los pasos de teclado y el estado del componente permiten reproducirlo.
03. Qué exigen las WCAG 2.2
El criterio 2.4.7, de nivel AA, trata de la visibilidad del indicador de foco. El 2.4.11, también AA, comprueba que un componente enfocado no quede completamente oculto por contenido creado por el sitio. Conviene evaluar ambos por separado. Ver un pequeño fragmento del botón puede bastar para evitar una ocultación total y seguir siendo insuficiente para entender la acción con comodidad.
El criterio 2.4.12, de nivel AAA, aborda la ocultación parcial. Como objetivo de diseño, procura que el control y su señal se vean completos. El criterio 2.4.3, de nivel A, se ocupa de que el orden secuencial conserve significado y operabilidad cuando la secuencia influye en ellos. El caso de una cabecera fija puede incumplir un requisito aunque cumpla los otros. En el informe, describe lo que ocurre y cita el criterio que corresponda a ese comportamiento.
04. Localiza la capa que invade el espacio de lectura
Una cabecera fija puede cambiar de altura al desplazarse, al abrir el menú o al ajustar el ancho de pantalla. Un aviso inferior, una barra de acciones o un panel de ayuda pueden ocupar parte de la misma ventana. Cada componente puede funcionar bien aislado y dejar muy poco espacio disponible al combinarse. La altura que importa es la que ocupa en el estado en que se produce el fallo.
Comprueba también qué contenedor se desplaza. En una página sencilla suele ser el documento. En una aplicación puede ser un panel interno con su propio desplazamiento y su propia barra. Un ajuste aplicado al documento no siempre llega a ese panel. Desactiva temporalmente la posición fija en el inspector y repite la misma secuencia. Si el control vuelve a verse, ya tienes una hipótesis concreta para probar en la plantilla.
05. Reserva espacio en el contenedor que se desplaza
Una solución posible es definir scroll-padding-block-start en el contenedor desplazable para tener en cuenta la altura que ocupa la cabecera. Si hay una barra fija abajo, evalúa scroll-padding-block-end. La técnica C43 del W3C muestra cómo combinar el margen de desplazamiento con espacio real para que el último elemento pueda salir de detrás de una barra. Comprueba el comienzo y el final del recorrido, porque el desplazamiento tiene límites.
Una altura fija copiada de la vista de escritorio se queda corta cuando el menú ocupa dos líneas. Utiliza valores que reflejen cada estado de la plantilla y prueba los cambios de tamaño. Si la capa ocupa demasiado espacio en pantallas bajas, dejar que se desplace con el contenido puede ser la mejor decisión. Comprueba el resultado con el desplazamiento automático del foco y con enlaces internos, ya que ambos pueden colocar contenido cerca de una cabecera.
06. Haz visible la señal de foco en cada estado
Conserva el indicador que proporciona el navegador o diseña uno que se distinga en las superficies reales del sitio. Un contorno útil alrededor de una tarjeta blanca puede perderse al pasar a un menú azul. Prueba botones principales, enlaces de texto, iconos y campos. Comprueba los estados normal y visitado, y revisa el contraste en el contexto en que se muestra cada control.
La regla CSS :focus-visible permite aplicar estilos cuando el navegador determina que conviene mostrar la señal. Evita quitar el contorno de forma global sin una alternativa comprobada. Revisa también los contenedores que recortan el contorno con overflow y las reglas que lo ocultan al superponer módulos. Si puedes distinguir el control únicamente cuando colocas el puntero encima, vuelve al teclado y revisa qué estado está aplicando el tema.
07. Repite la tarea en ambas direcciones y con ampliación
Parte de un estado reproducible y anota la combinación de navegador, tamaño de ventana y zoom. Avanza con Tab y vuelve con Mayús+Tab. Observa cada control en el instante en que recibe el foco. Prueba cerca de los límites superior e inferior de la ventana y al llegar al último elemento de un panel. Algunas capas tapan el contenido solo al retroceder, cuando el navegador desplaza la página en sentido contrario.
Repite con la cabecera expandida, el menú cerrado y los avisos que suelen aparecer en una primera visita. En una pantalla estrecha o con ampliación, el texto puede ocupar varias líneas y reducir la altura disponible. Una grabación corta con la secuencia exacta ayuda a distinguir un salto de desplazamiento de un cambio de foco. El resultado esperado se puede expresar con claridad: la persona identifica el control actual antes de decidir si lo activa.
08. Corrige la plantilla de Divi y verifica el recorrido
En WordPress, comprueba si la cabecera procede del tema, de una plantilla del Theme Builder o de un módulo que permanece fijo. Identifica dónde se define su altura y qué regla controla el desplazamiento. Haz la corrección en el componente que causa la superposición y revisa las páginas que lo reutilizan. Incluye al menos una página larga, un formulario y un recorrido con navegación interna.
Un overlay puede ofrecer ajustes de presentación, pero la geometría de una cabecera, el orden de navegación y el espacio reservado pertenecen a la implementación de la página. Una herramienta automática puede encontrar problemas puntuales. La prueba que cierra este caso consiste en completar de nuevo la reserva con teclado, ver cada paso en el momento adecuado y confirmar que se puede avanzar o volver sin perder la referencia.