Principio 3/3.2 Predecible/3.2.3-A

De WCAG Wiki

3.2.3-A. Navegación coherente

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Los enlaces y mecanismos de navegación que se repiten en un sitio web deben aparecer siempre en el mismo orden relativo.

Comprensión del criterio

Descripción resumida

Los menús, cabeceras, pies y otros elementos de navegación repetidos mantienen la misma posición y orden en todas las páginas del sitio.

Objetivo

Facilitar que las personas aprendan el patrón de navegación y localicen opciones de forma predecible y eficiente en todo el sitio.

Importancia de cumplir el criterio

La consistencia reduce la carga cognitiva, mejora la orientación y beneficia a usuarios con dificultades cognitivas, baja visión y a quienes usan lectores de pantalla.

Referencias WCAG

Recursos de apoyo

  • Patrones de diseño consistentes (design systems)
  • Landmarks semánticos: <nav>, <header>, <aside>, <footer>

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar elementos de navegación repetidos (menú global, buscador, footer, sidebar).
  2. Paso 2. Revisar varias páginas y comprobar que mantienen el mismo orden relativo y posición.
  3. Paso 3. Validar que las etiquetas (texto/ARIA) y el orden de tabulación son consistentes.
  4. Paso 4. Verificar con teclado y lector de pantalla la previsibilidad de la navegación.

Resultado esperado

Los mecanismos de navegación repetidos conservan el mismo orden relativo y posición en todas las páginas del sitio.

Ejemplo

✅ Navegación consistente

<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/soporte">Soporte</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

✅ Variación justificada en navegación secundaria

<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Submenú de la sección actual">…</nav>

Otras herramientas de evaluación

  • Comparación entre páginas (capturas / inspección DOM)
  • Revisión de landmarks y roles
  • Navegación por teclado
  • NVDA, JAWS, VoiceOver










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.2.3-A. Navegación coherente

Loading comments...