TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Estructurar un layout completo utilizando únicamente <div> elimina los "Puntos de Referencia" (Landmarks) del navegador. Sin <main>, <header> o <nav>, la persona usuaria no puede usar atajos de teclado para saltar los menús repetitivos, forzándolo a un recorrido lineal agotador.
La barrera del salto de región
En sitios modernos complejos, el menú superior y las barras laterales pueden poseer decenas de enlaces interactivos. Sin Landmarks, las personas usuarias ciegos o con movilidad reducida deben tabular a través de los mismos 30 enlaces del header en cada nueva página para llegar al contenido real, fallando estrepitosamente en el criterio WCAG 1.3.6 (Propósito de la Identificación) de nivel AAA.
El patrón erróneo: Código Accesible Deficiente
La famosa "sopa de divs" que elimina completamente el concepto de macro-arquitectura de la página web.
<!-- MAL: Estructura amorfa y plana -->
<body>
<div class="header">...</div>
<div class="sidebar">...</div>
<div class="content-wrapper">
Contenido real aquí
</div>
<div class="footer">...</div>
</body>La Solución Accesible: Código Recomendado
Adoptar elementos estructurales de HTML5. Las tecnologías asistivas generan un menú especial que permite a la persona usuaria saltar directamente a "Principal" (Main) o "Navegación" (Nav) con una sola tecla.
<!-- BIEN: Regiones semánticas (Landmarks) -->
<body>
<header>...</header>
<nav aria-label="Menú lateral">...</nav>
<main>
Contenido real y enfocable de inmediato
</main>
<footer>...</footer>
</body>Matriz de Soporte y Comportamiento
| Lector de Pantalla | Modo de Navegación por Landmarks |
|---|---|
| NVDA | Presionando la tecla D (salto rápido) o mediante la lista de elementos (Insert+F7). |
| JAWS | Presionando la tecla R para saltar entre regiones semánticas nativas. |
| VoiceOver (Mac) | Uso del Rotor (VO+U) para listar y navegar instantáneamente a los Puntos de Referencia. |
Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
En NVDA, presionar la tecla D para saltar entre Landmarks (puntos de referencia). Si la página carece de etiquetas semánticas, no habrá destinos a los que saltar. En JAWS, usar R para navegar entre regiones. En VoiceOver (macOS), abrir el Rotor (VO+U) y seleccionar "Puntos de referencia" para listar las regiones disponibles.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, abrir el panel Accessibility y expandir el árbol completo. Verificar la presencia de nodos con roles banner (header), navigation (nav), main y contentinfo (footer).
Herramientas Automatizadas
Axe DevTools: la regla landmark-one-main verifica la presencia del hito principal. WAVE lista todas las regiones detectadas bajo "Structural Elements". La extensión Landmarks de Firefox permite visualizar y navegar por las regiones disponibles directamente en el viewport.
