TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La especificación ARIA estipula que solo debe existir un único elemento de referencia (landmark) con el rol banner por documento, el cual usualmente recae en el <header> principal. Definir múltiples encabezados globales confunde a las tecnologías asistivas sobre cuál es el inicio real del sitio.
La fragmentación de la estructura superior
Es común que los portales gubernamentales o corporativos utilicen múltiples barras superiores (una para logos de aliados, otra para el menú, otra para herramientas de accesibilidad). Si el equipo de desarrollo encierra cada sección en una etiqueta <header> a nivel de la raíz, se rompe el principio de Información y Relaciones (WCAG 1.3.1).
El patrón erróneo: Código Accesible Deficiente
Declarar múltiples cabeceras en la raíz del documento anula la previsibilidad de la navegación por atajos de teclado.
<!-- MAL: Múltiples landmarks de banner global -->
<body>
<header> <!-- Barra de accesibilidad --> </header>
<header> <!-- Logos del Estado --> </header>
<header> <!-- Menú de navegación principal --> </header>
<main>...</main>
</body>La Solución Accesible: Código Recomendado
Unificar todos los componentes de la cabecera dentro de un único contenedor <header> principal, o delegar roles menores a las barras accesorias.
<!-- BIEN: Unificación de la identidad global -->
<body>
<header>
<div class="accesibility-bar">...</div>
<div class="state-logos">...</div>
<nav aria-label="Menú Principal">...</nav>
</header>
<main>...</main>
</body>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
En NVDA, abrir la lista de landmarks con Insert+F7 y seleccionar "Puntos de referencia". Si aparecen múltiples entradas "banner", existe una violación. Solo debe existir una.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, verificar que solo exista un nodo con rol banner en el nivel superior del árbol. Cualquier <header> anidado dentro de <article> o <section> perderá automáticamente su rol de banner.
Herramientas Automatizadas
Axe DevTools: la regla landmark-no-duplicate-banner verifica que no se duplique. WAVE señala "Multiple banner landmarks" como error estructural.
