TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La etiqueta <main> representa el hito más importante del ecosistema web. Para que los lectores de pantalla puedan detectarlo como el "Centro Absoluto", debe existir libremente en el nivel superior del DOM, usualmente como hijo directo del <body>. Si lo anidas dentro de un <section> o <article>, pierde su superpoder de enrutamiento.
El secuestro del Hito Principal
Las tecnologías asistivas permiten buscar específicamente el hito principal para omitir de tajo cualquier navegación suplementaria. Si por arquitectura CSS (ej: forzar flexbox globales) un desarrollador envuelve el <main> dentro de otro contenedor que porta un rol de landmark (WCAG 1.3.1), su jerarquía se desmorona a los ojos del Árbol de Accesibilidad.
El patrón erróneo: Código Accesible Deficiente
El motor de accesibilidad encuentra una sección, pero el landmark global queda oculto bajo su sombra.
<!-- MAL: El <main> está cautivo dentro de un contenedor seccionador -->
<body>
<section aria-label="Contenedor de la aplicación">
<header>...</header>
<main> Contenido crítico... </main>
</section>
</body>La Solución Accesible: Código Recomendado
El orden arquitectónico no es negociable: las piezas globales nunca deben ser subyugadas a componentes particulares.
<!-- BIEN: Flujo jerárquico impecable y llano -->
<body>
<header>...</header>
<main>
<section> Contenido crítico... </section>
</main>
<footer>...</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.
