TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La carencia de hitos semánticos (Landmarks) como <main>, <nav> o <header> deja a las personas usuarias de lectores de pantalla sin un índice de la página. Estas etiquetas HTML5 funcionan como un mapa estructural, permitiendo saltar directamente a secciones clave de la interfaz.
Un documento sin índice
Imagínate leer un libro de 500 páginas que no tiene capítulos ni índice. Así es como percibe una página web construida con puros <div> una persona usuaria de tecnología asistiva. Las regiones semánticas (Landmarks) permiten a las personas usuarias obtener un resumen rápido de las partes de una página y navegar hacia ellas inmediatamente, cumpliendo con la WCAG 2.4.1 Evitar Bloques.
El patrón erróneo: Código Accesible Deficiente
Una estructura basada exclusivamente en divs genéricos no aporta ninguna información estructural al árbol de accesibilidad.
<!-- MAL: Estructura plana que obliga a navegar elemento por elemento -->
<div id="header">Logo y Menú</div>
<div id="content">
<div class="article">Contenido principal de la página</div>
</div>
<div id="footer">Enlaces legales</div>La Solución Accesible: Código Recomendado
Reemplazar los divs contenedores principales por sus equivalentes semánticos en HTML5 crea automáticamente un mapa de navegación asistida (Landmarks).
<!-- BIEN: Uso de Landmarks semánticos -->
<header>Logo y Menú</header>
<main>
<article>Contenido principal de la página</article>
</main>
<footer>Enlaces legales</footer>Matriz de Soporte y Comportamiento
| Herramienta | Sin Landmarks (Puros Divs) | Con Landmarks Semánticos |
|---|---|---|
| Lector de Pantalla (Ej: NVDA) | No detecta regiones. La persona usuaria debe tabular decenas de veces por toda la cabecera. | Permite saltar con atajos de teclado (ej. tecla 'D' en NVDA) a la región principal. |
| Extensiones de Navegación | El mapa de regiones aparecerá vacío. | Mostrará un menú estructurado de la página con saltos directos. |
Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con JAWS, presiona R para navegar a través de las regiones de la página. En NVDA, la tecla es la D. Si no tienes landmarks, el software te dirá que "no se encontraron puntos de referencia". Con VoiceOver en Mac, abre el rotor con VO + U y busca el menú de "Landmarks".
Inspección del Árbol de Accesibilidad
En Chrome DevTools, busca las etiquetas de alto nivel en el panel Accessibility. Deben mapearse a roles específicos: <header> a banner, <nav> a navigation, <main> a main.
Herramientas Automatizadas
Axe DevTools y WAVE detectan fácilmente la falta de un hito principal (main landmark) en la página. Asegúrate de que todo el contenido perceptible esté contenido dentro de algún Landmark para evitar advertencias de "contenido huérfano".
