TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Para que un <header> sea reconocido automáticamente como el landmark de banner de la página, debe estar ubicado en el nivel superior de la estructura del DOM. Si lo anidas dentro de un <main>, <article> o <section>, perderá su rol global.
La degradación silenciosa del Landmark Banner
Un error clásico de maquetación en React, Vue o Angular es envolver toda la aplicación dentro de una etiqueta <main> global en el componente raíz. Esto provoca que la cabecera quede anidada, imposibilitando a las personas usuarias ciegos saltar directamente al inicio del sitio usando sus atajos de teclado para regiones.
El patrón erróneo: Código Accesible Deficiente
El encabezado queda sepultado en la estructura semántica, y el lector de pantalla no anunciará el clásico "Banner, región".
<!-- MAL: El encabezado es hijo de main -->
<body>
<main>
<header>
<h1>Ministerio de Tecnología</h1>
<nav>...</nav>
</header>
<div class="content">...</div>
</main>
</body>La Solución Accesible: Código Recomendado
Extraer el <header> y el <footer> al mismo nivel jerárquico que el <main>.
<!-- BIEN: Jerarquía de regiones respetada -->
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
En NVDA, presionar D para saltar a landmarks y verificar si se anuncia "Banner, región". Si el <header> está anidado dentro de <main>, no aparecerá como landmark global.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, verificar que el nodo <header> tenga rol banner y NO sea descendiente de main, article o section.
Herramientas Automatizadas
Axe DevTools: la regla landmark-banner-is-top-level verifica que el banner sea un landmark de nivel superior. Esta regla es altamente confiable para este patrón específico.
