TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Para que un <footer> sea reportado como la región "Pie de página / Contentinfo" por el lector de pantalla, debe ser un descendiente directo de <body> o estar al mismo nivel que <main>. Si lo anidas, se degrada a un simple bloque de texto sin importancia global.
El secuestro semántico por maquetación
Suele ocurrir en Single Page Applications (SPAs) donde un desarrollador envuelve todo el componente de la vista actual dentro de una etiqueta <main>, incluyendo la cabecera y el pie. La persona usuaria ciego que intenta usar el atajo para saltar directamente a la información de contacto o políticas de privacidad, fallará miserablemente.
El patrón erróneo: Código Accesible Deficiente
El motor de accesibilidad encuentra el footer, pero al ver que pertenece al contenido principal, no lo eleva al índice de regiones globales.
<!-- MAL: El footer está cautivo dentro del main -->
<body>
<main>
<h1>Noticias</h1>
<p>...</p>
<footer>
<p>Ministerio de las TIC - 2026</p>
</footer>
</main>
</body>La Solución Accesible: Código Recomendado
El orden estructural inquebrantable de HTML5: Cabecera, Principal y Pie de página deben ser hermanos en el DOM.
<!-- BIEN: Flujo jerárquico impecable -->
<body>
<header>...</header>
<main>
<h1>Noticias</h1>
<p>...</p>
</main>
<footer>
<p>Ministerio de las TIC - 2026</p>
</footer>
</body>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar D para saltar entre landmarks (puntos de referencia). Verificar que las regiones semánticas sean detectadas correctamente y que sus nombres sean descriptivos. En JAWS, usar R para navegar entre regiones. En VoiceOver (macOS), abrir el Rotor (VO+U) y verificar la lista de "Puntos de referencia".
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.3.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas relacionadas con estructura (ej: list, listitem, landmark-*) son altamente confiables para detectar violaciones del Criterio 1.3.1. Complementar con el validador HTML del W3C para errores de modelo de contenido.
