TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Solo debe existir un único elemento en toda la página que se comporte como el hito (landmark) contentinfo, el cual tradicionalmente recae en el <footer> global. Declarar múltiples footers en la raíz desorienta a la persona usuaria sobre dónde están los verdaderos datos de contacto del portal.
La duplicidad de la información corporativa
Si tu diseño incluye una barra gris (pre-footer) con logos aliados y una barra negra (footer principal) con enlaces legales, es un error semántico envolver ambas en etiquetas <footer> separadas a nivel del <body>. El lector de pantalla anunciará dos "Pies de página", violando el criterio de Información y Relaciones (WCAG 1.3.1).
El patrón erróneo: Código Accesible Deficiente
Inyectar múltiples regiones globales del mismo tipo destruye la previsibilidad del modelo mental.
<!-- MAL: Múltiples landmarks globales de pie de página -->
<body>
<main>...</main>
<footer> <!-- Logos institucionales --> </footer>
<footer> <!-- Enlaces legales y contacto --> </footer>
</body>La Solución Accesible: Código Recomendado
Consolidar todas las secciones de cierre dentro de una única macro-etiqueta <footer>.
<!-- BIEN: Única región global contentinfo -->
<body>
<main>...</main>
<footer>
<div class="pre-footer"> <!-- Logos institucionales --> </div>
<div class="main-footer"> <!-- Enlaces legales --> </div>
</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.
