Fallo Común F110 de WCAG 2.1: Pies de página fijos o encabezados que ocultan elementos enfocados

La accesibilidad web busca garantizar que todos los usuarios, incluidos aquellos que dependen de un teclado para navegar, puedan interactuar con el contenido sin obstáculos. Un problema frecuente ocurre cuando los pies de página fijos (sticky footers) o encabezados fijos (sticky headers) ocultan elementos enfocados, impidiendo que los usuarios vean dónde se encuentra el foco de navegación.

Este problema está relacionado con el criterio de conformidad 2.4.11: Foco no oculto de WCAG 2.2, que establece que los elementos enfocados deben ser completamente visibles. Cuando un usuario navega con el teclado mediante la tecla Tab, el elemento que recibe el foco no debe ser ocultado por otros componentes de la interfaz.

Según estudios de WebAIM, el 60% de los usuarios con discapacidades dependen en gran medida de la navegación por teclado. Los obstáculos visuales, como encabezados y pies de página fijos, dificultan su experiencia y pueden hacer que un sitio sea inutilizable para ellos.

Acerca de este fallo

Este fallo ocurre cuando un encabezado o pie de página fijo oculta el elemento que recibe el foco al navegar con el teclado. Esto impide que los usuarios sepan en qué parte de la página están y qué elemento están interactuando.

Situaciones donde ocurre este fallo:

• Un sitio web con un pie de página fijo que cubre enlaces de navegación al moverse con Tab.
• Un menú de encabezado fijo que oculta botones o formularios en la parte superior de la pantalla.
• Un banner flotante que bloquea elementos seleccionados con el teclado sin opción de cerrarlo.

Ejemplos

Ejemplo incorrecto 1: Encabezado fijo que oculta elementos enfocados

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: #333;
  color: white;
  z-index: 1000;
}

<header>
  <h1>Mi Sitio Web</h1>
</header>
<main>
  <button>Botón 1</button>
  <button>Botón 2</button>
</main>

🔴 Problema: Cuando el usuario navega con Tab, los botones pueden quedar ocultos debajo del encabezado fijo.

Solución correcta: Ajustar el desplazamiento para evitar ocultar el foco

html {
  scroll-padding-top: 100px; /* Evita que el encabezado oculte el foco */
}

<header>
  <h1>Mi Sitio Web</h1>
</header>
<main>
  <button>Botón 1</button>
  <button>Botón 2</button>
</main>

✅ ¿Qué mejora?: Se usa scroll-padding-top para asegurar que el contenido enfocado no quede oculto por el encabezado.

Ejemplo incorrecto 2: Pie de página fijo que cubre elementos enfocados

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #222;
  color: white;
}

<main>
  <a href="#">Enlace 1</a>
  <a href="#">Enlace 2</a>
</main>
<footer>
  <p>Pie de página</p>
</footer>

🔴 Problema: Los enlaces pueden quedar ocultos al navegar con Tab si el pie de página fijo no permite su visualización.

Solución correcta: Asegurar que el foco sea visible

footer:focus-within {
  outline: 2px solid yellow; /* Resaltar el foco en el pie de página */
  background-color: rgba(0, 0, 0, 0.9);
}

<footer tabindex="-1">
  <p>Pie de página</p>
</footer>

✅ ¿Qué mejora?: Se usa tabindex="-1" en el pie de página para que pueda recibir foco y asegurar que no oculte elementos importantes.

Errores comunes y cómo evitarlos

Errores frecuentes:

1. Usar position: fixed sin ajustar el espacio de desplazamiento.
2. No proporcionar un margen o relleno adecuado (scroll-padding-top o scroll-margin).
3. No probar la navegación con teclado para verificar la visibilidad del foco.

Cómo evitar estos errores:

• Prueba la navegación con Tab en tu sitio web para detectar problemas.
• Asegura espacio adicional con scroll-padding-top o scroll-margin.
• Utiliza tabindex="-1" en elementos fijos para hacerlos accesibles sin bloquear el foco.

Preguntas frecuentes sobre el fallo común F110

¿Por qué los elementos fijos pueden causar problemas de accesibilidad?

Porque pueden ocultar elementos enfocados, dificultando la navegación por teclado.

¿Cómo puedo probar si mi sitio tiene este problema?

Usa Tab para moverte en la página y verifica si el foco queda oculto detrás de elementos fijos.

¿Cómo soluciono un encabezado que oculta el foco?

Agrega scroll-padding-top en el <html> para garantizar que el foco sea visible.

¿El problema solo afecta a usuarios de teclado?

Principalmente sí, pero también puede afectar a usuarios de tecnologías de asistencia.

¿Es recomendable eliminar los elementos fijos?

No necesariamente, pero deben diseñarse de manera que no oculten contenido enfocado.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F110: Incumplimiento del Criterio de Conformidad 2.4.11 debido a pies de página fijos o encabezados que ocultan elementos enfocados
• Comprender el criterio de éxito 2.4.11 Enfoque no oscurecido (mínimo)
• CSS Scroll Padding – MDN

Pruebas y validación

Procedimiento

• Navegar con Tab a través de la página.
• Observar si algún elemento enfocado queda oculto por un pie de página o encabezado fijo.
• Ajustar scroll-padding o margin para asegurar que los elementos sean visibles.

Resultados esperados

• ✅ Si el foco nunca es ocultado, la página cumple con WCAG 2.2.
• ❌ Si el foco se oculta en algún punto, la página no es conforme y debe corregirse.

Los pies de página y encabezados fijos pueden mejorar el diseño de un sitio, pero deben implementarse sin comprometer la accesibilidad. Garantizar que los elementos enfocados sean siempre visibles es esencial para una experiencia inclusiva.

🚀 ¡Optimiza la accesibilidad de tu web! Si necesitas ayuda, contáctanos.