TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Para que un <aside> (como una barra lateral de widgets, un banner de contacto o enlaces relacionados) sea reportado por los lectores de pantalla como una "Región Complementaria" global, debe estar fuera del <main>. Si lo anidas, perderá su estatus de landmark independiente.
La degradación de los puntos de referencia
Una persona usuaria ciego busca atajos. Cuando escanea las regiones (Landmarks) de un sitio, espera encontrar el <header>, el <main> y el <aside> (complementario). Si el desarrollador colocó el <aside> dentro del <main> por facilidades de maquetación visual (ej. un CSS Grid de 2 columnas), el <aside> queda secuestrado semánticamente.
El patrón erróneo: Código Accesible Deficiente
El lector de pantalla anunciará que todo pertenece a la zona principal, forzando a la persona usuaria a recorrer exhaustivamente todo el texto antes de toparse por accidente con la barra lateral.
<!-- MAL: El Aside atrapado en el Main pierde su valor global -->
<main class="grid-layout">
<div class="content-area">
<h1>Artículo principal</h1>
</div>
<aside class="sidebar">
<h3>Enlaces relacionados</h3>
</aside>
</main>La Solución Accesible: Código Recomendado
Extraer el <aside> al mismo nivel que el <main> y aplicar el grid de columnas a un contenedor padre genérico (como un div o el propio body).
<!-- BIEN: Jerarquía respetada, el aside es hermano del main -->
<div class="grid-layout-global">
<main>
<h1>Artículo principal</h1>
</main>
<aside aria-label="Enlaces de interés">
<h3>Enlaces relacionados</h3>
</aside>
</div>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.
