TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si utilizas múltiples etiquetas <nav> en la misma vista (ej: menú principal, paginación, enlaces del footer), debes proveerles un nombre único con aria-label o aria-labelledby para evitar que el lector de pantalla anuncie "navegación" de forma idéntica y confusa múltiples veces.
El problema de las regiones duplicadas mudas
Una página bien estructurada usa el elemento <nav>. Sin embargo, en arquitecturas modernas es normal tener un nav en la cabecera, otro en la barra lateral, otro para la paginación y otro en el pie de página. Si no se distinguen (WCAG 1.3.1), la persona usuaria ciego se verá obligado a entrar en cada región "ciegamente" para descubrir qué enlaces aloja.
El patrón erróneo: Código Accesible Deficiente
Tres regiones de navegación genéricas generadas en el DOM sin contexto diferenciador.
<!-- MAL: El SR lista: Navegación, Navegación, Navegación -->
<header>
<nav>... (Links principales) </nav>
</header>
<main>
<nav>... (Paginación) </nav>
</main>
<footer>
<nav>... (Links legales) </nav>
</footer>La Solución Accesible: Código Recomendado
Etiquetado diferencial usando aria-label o vinculando un encabezado oculto mediante aria-labelledby.
<!-- BIEN: Regiones semánticamente nombradas -->
<header>
<nav aria-label="Menú Principal">...</nav>
</header>
<main>
<nav aria-label="Paginación de resultados">...</nav>
</main>
<footer>
<nav aria-label="Políticas y enlaces de interés">...</nav>
</footer>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
En NVDA, presionar D repetidamente para navegar entre landmarks. Si existen múltiples <nav> sin aria-label, el lector anunciará "Navegación" idénticamente para cada una. Con etiquetas diferenciadas, anunciará "Menú Principal, navegación", "Paginación de resultados, navegación", etc.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, expandir el Accessibility Tree y buscar nodos con rol navigation. Verificar que cada uno tenga un Name único y descriptivo.
Herramientas Automatizadas
Axe DevTools: la regla landmark-unique detecta landmarks duplicados sin nombres diferenciados. WAVE lista las regiones y permite verificar visualmente si están correctamente nombradas.
