TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La especificación es matemática: puede existir un único elemento <main> visible por documento. Declarar múltiples puntos de referencia principales en una misma página es como entregar un mapa con dos "centros de ciudad", desorientando por completo a la persona usuaria de lector de pantalla.
La competencia por la atención principal
A menudo, por ensamblar vistas a partir de micro-componentes reutilizables, un frontend termina inyectando dos etiquetas <main>: una envolviendo el contenido del artículo, y otra por error envolviendo una galería de imágenes inferior. Esto viola la WCAG 1.3.1 (Información y Relaciones).
El patrón erróneo: Código Accesible Deficiente
El atajo de teclado para saltar al contenido central ahora lanza a la persona usuaria a una de dos opciones impredecibles.
<!-- MAL: Competencia semántica destructiva -->
<body>
<header>...</header>
<main> <!-- Contenido del artículo --> </main>
<main> <!-- Formulario de comentarios --> </main>
</body>La Solución Accesible: Código Recomendado
Envolver todo el contenido relevante de la vista dentro de un solo gran <main>, y subdividir internamente utilizando etiquetas <section> o <article>.
<!-- BIEN: Centro neurálgico unificado -->
<body>
<header>...</header>
<main>
<article> <!-- Contenido del artículo --> </article>
<section aria-label="Comentarios"> <!-- Formulario --> </section>
</main>
</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.
