WCAG 3.2.3: Navegación coherente

Qué significa esta regla

El Criterio de Conformidad 3.2.3 de las WCAG — Navegación consistente (Nivel AA) establece que los componentes de navegación repetidos en varias páginas de un sitio web deben aparecer en el mismo orden relativo cada vez que se encuentren, a menos que la persona usuaria haya provocado por sí misma un cambio en ese orden. El criterio se aplica a cualquier conjunto de páginas web que compartan un propósito común o formen parte del mismo sitio o aplicación.

La expresión "mismo orden relativo" es importante: las WCAG no exigen que la navegación contenga siempre el mismo número de elementos, ni que no puedan aparecer otros elementos entre los elementos de navegación. Lo que exige es que la secuencia de enlaces de navegación, tal como aparecen para una persona usuaria que se desplaza por la interfaz, se mantenga consistente de una página a otra. Por ejemplo, si tu navegación principal lista "Home", "Products", "About" y "Contact" en ese orden en la página de inicio, esos mismos elementos deben aparecer en la misma secuencia en todas las demás páginas donde exista ese bloque de navegación.

El criterio abarca todos los mecanismos de navegación repetidos: menús de navegación principal del sitio, rutas de migas de pan (breadcrumbs), grupos de enlaces en el pie de página, menús laterales, enlaces para saltar la navegación, barras de búsqueda y cualquier otro componente interactivo que ayude a la persona usuaria a desplazarse por un sitio. Se aplica independientemente de si esos componentes se implementan como landmarks <nav>, listas de enlaces <ul>, menús personalizados mejorados con ARIA u otros patrones de marcado.

Qué se considera conforme: Los bloques de navegación aparecen en el mismo orden relativo en todas las páginas donde se repiten. Se pueden añadir elementos, resaltarlos o marcarlos como activos (por ejemplo, distinguiendo visualmente el enlace de la página actual), siempre que la secuencia general no cambie. Un reordenamiento iniciado por la persona usuaria —como un panel de control personalizable donde la persona arrastra paneles a nuevas posiciones— también es conforme, porque el cambio se originó en la persona usuaria.

Qué se considera no conforme: Una navegación principal que lista "Home → Products → Contact → About" en la página de inicio pero lista "Home → About → Products → Contact" en una página de detalle de producto no cumple el 3.2.3. De forma similar, un sitio que inserta condicionalmente enlaces adicionales en posiciones arbitrarias dentro de la navegación basándose en lógica interna (sin acción de la persona usuaria) tampoco cumpliría.

Excepción oficial: La especificación establece explícitamente que el requisito no se aplica cuando la persona usuaria ha iniciado el cambio en el orden. Esta es la única excepción normativa. Los cambios impulsados por el sistema, la lógica del servidor o algoritmos de personalización —no desencadenados directamente por la persona usuaria— no califican para esta excepción.

Por qué es importante

La navegación consistente es fundamental para la accesibilidad cognitiva. Las personas que dependen de la memoria espacial y de patrones predecibles para orientarse —incluidas personas con discapacidades cognitivas, trastornos de atención, lesiones cerebrales traumáticas o deterioro cognitivo relacionado con la edad— dependen en gran medida de la suposición de que la navegación de un sitio estará en el mismo lugar y en el mismo orden cada vez que la encuentren. Cuando la navegación cambia de forma inesperada, estas personas deben volver a aprender el diseño en cada página, lo que aumenta drásticamente la carga cognitiva y la probabilidad de errores o abandono.

Para personas ciegas y con baja visión que navegan con lectores de pantalla (NVDA, JAWS, VoiceOver), la navegación consistente reduce el tiempo dedicado a buscar landmarks conocidos. Una persona usuaria de lector de pantalla que ha memorizado que el enlace "Contact" es el cuarto elemento en la navegación principal puede pulsar la tecla Tab cuatro veces en cualquier página para llegar a él, pero solo si se garantiza que el orden se mantiene igual. Un orden inconsistente destruye esta eficiencia y obliga a la persona a escuchar toda la navegación en cada carga de página.

Para personas con discapacidad motriz que dependen de la navegación solo con teclado, acceso por pulsador o seguimiento ocular, cada pulsación adicional o movimiento de cabeza tiene un coste real. Una navegación predecible reduce el número de interacciones necesarias para llegar a destinos visitados con frecuencia. Según la Organización Mundial de la Salud, más de 1,3 mil millones de personas en todo el mundo viven con algún tipo de discapacidad, muchas de las cuales dependen de tecnologías de apoyo que se benefician directamente de interfaces consistentes y predecibles.

Para personas con dificultades de lectura como la dislexia, escanear una barra de navegación ya supone un esfuerzo. Una posición y un orden consistentes significan que pueden apoyarse en anclas visuales —posición, forma, color— en lugar de volver a leer las etiquetas cada vez.

Un escenario concreto del mundo real: imagina a una paciente que utiliza el sitio web de un hospital para reservar citas de seguimiento. La navegación en la página de inicio lista "Services", "Appointments", "Doctors" y "Contact" en ese orden. La paciente navega al perfil de una doctora y busca "Appointments" en la segunda posición, pero en esa página la navegación se ha reorganizado para empezar con "Doctors" seguido de "Appointments". La paciente, ya estresada, debe volver a escanear todo el menú. Para una persona con discapacidad cognitiva o alfabetización limitada, esta fricción puede marcar la diferencia entre completar la tarea y abandonarla por completo.

Más allá de la accesibilidad, la navegación consistente tiene beneficios medibles de SEO y usabilidad. Los rastreadores de motores de búsqueda recorren los enlaces de navegación para descubrir e indexar contenido; una estructura de enlaces estable mejora la eficiencia del rastreo y la distribución interna de autoridad de enlaces. Las pruebas de usabilidad muestran de forma consistente que la navegación predecible reduce el tiempo de realización de tareas y las tasas de error para todas las personas usuarias, no solo para aquellas con discapacidad.

Reglas relacionadas de Axe-core

WCAG 3.2.3 requiere pruebas manuales. No existe una regla automatizada de axe-core que pueda señalar un orden de navegación inconsistente, porque las herramientas automatizadas carecen del contexto entre páginas necesario para comparar secuencias de navegación. Un escáner automatizado evalúa una sola página de forma aislada y no puede observar si la navegación de esa página difiere de la navegación de otras veinte páginas del mismo sitio.

• Comparación manual entre páginas (sin ID de regla de axe): Las personas evaluadoras deben visitar varias páginas dentro del mismo sitio y registrar manualmente el orden de los elementos de navegación en cada página, para luego comparar esos registros. Las herramientas automatizadas no pueden realizar esta comprobación porque necesitarían analizar varias páginas simultáneamente, mantener estado entre cargas de página y aplicar juicio semántico sobre qué elementos constituyen el mismo componente de navegación, tareas que requieren razonamiento contextual humano.
• Por qué la automatización no es suficiente: Incluso las herramientas heurísticas que señalan problemas relacionados con la navegación suelen comprobar la presencia de landmarks de navegación (como la regla de axe landmark-one-main o region), no la consistencia del orden entre páginas. La comparación de orden requiere una metodología de auditoría a nivel de sitio, no un escaneo de una sola página. Por eso el 3.2.3 se clasifica como criterio que requiere revisión manual en todos los marcos principales de pruebas de accesibilidad, incluidos axe-core, Lighthouse y IBM Equal Access Checker.

Cómo hacer las pruebas

1. Ejecuta un escaneo automatizado para obtener un contexto de base: Usa axe DevTools, Lighthouse o una extensión del navegador en páginas representativas para confirmar que los elementos de navegación están correctamente marcados como landmarks <nav> o con role='navigation'. Aunque estas herramientas no señalarán inconsistencias en el orden, te ayudan a identificar qué se está tratando como navegación entre páginas. Documenta cualquier problema con la estructura de landmarks antes de pasar a las comprobaciones manuales.
2. Selecciona una muestra representativa de páginas: Elige al menos entre cinco y diez páginas de diferentes secciones del sitio: página de inicio, una página de categoría, una página de detalle de producto o artículo, una página de formulario y la página de contacto. Si el sitio tiene miles de páginas, usa una muestra estratificada que cubra todas las plantillas principales. Registra la URL y el tipo de página de cada una.
3. Mapea manualmente el orden de la navegación: En cada página de la muestra, abre el árbol de accesibilidad del navegador (Chrome DevTools → panel Accessibility, o Firefox Accessibility Inspector) y lista todos los enlaces dentro de la navegación principal en el orden en que aparecen en el DOM. Anota también el orden en que aparecen visualmente. Si el CSS está reordenando elementos visualmente (por ejemplo, usando flex-direction: row-reverse o propiedades order), el orden visual puede diferir del orden en el DOM: ambos deben ser consistentes.
4. Compara entre páginas: Coloca tus listas de orden de navegación una al lado de la otra. Señala cualquier página donde la secuencia de elementos de navegación compartidos difiera de la línea base establecida en la página de inicio. Anota qué elementos se movieron y en qué dirección.
5. Prueba de navegación con teclado (NVDA + Firefox): Abre NVDA, inicia Firefox y navega a la página de inicio. Pulsa D para saltar a la siguiente región landmark y localizar la navegación principal. Usa la tecla Tab para desplazarte por los enlaces de navegación y di en voz alta o anota el orden. Luego navega a una segunda página (por ejemplo, una página interior de artículo) y repite. Escucha si hay algún cambio en la secuencia de anuncios de enlaces.
6. Prueba con lector de pantalla (VoiceOver + Safari en macOS): Activa VoiceOver (Command + F5), abre Safari y usa el Web Rotor (Control + Opción + U) para abrir el menú de Links o Landmarks. Navega hasta la navegación principal y anota el orden de los elementos. Repite en al menos tres tipos de página diferentes y compara.
7. Prueba con JAWS + Chrome: Abre JAWS, inicia Chrome y pulsa R para recorrer las regiones hasta llegar a la navegación principal. Recorre los enlaces con Tab y registra el orden. Repite en distintos tipos de página.
8. Comprueba las excepciones iniciadas por la persona usuaria: Si el sitio ofrece funciones de personalización o de personalización de la navegación, verifica que cualquier reordenamiento solo se produzca después de una acción explícita de la persona usuaria (por ejemplo, la persona hace clic en "Customize Menu" y arrastra elementos). Confirma que el estado reordenado se mantiene de forma consistente: el nuevo orden también debe permanecer consistente en todas las páginas después de que la persona lo configure.

Cómo corregirlo

Renderizado inconsistente del lado del servidor — Incorrecto

<!-- Homepage navigation -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<!-- Product detail page navigation — order changed by CMS template -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/products'>Products</a></li>
  </ul>
</nav>

Renderizado inconsistente del lado del servidor — Correcto

<!-- Shared navigation partial (e.g., _nav.html or a component) used on every page -->
<!-- The active page is indicated with aria-current, not by reordering -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/' aria-current='page'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- On the Products page, only aria-current moves — the order stays identical -->

Reordenamiento visual con CSS que crea inconsistencia — Incorrecto

<!-- DOM order: Home, Products, About, Contact -->
<!-- CSS on interior pages uses flex order to visually move Contact first -->
<style>
  /* Applied only on interior page templates */
  nav ul li:last-child { order: -1; }
</style>
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Visual order becomes Contact, Home, Products, About — inconsistent with homepage -->

Reordenamiento visual con CSS que crea inconsistencia — Correcto

<!-- Use consistent DOM order and consistent CSS across all templates -->
<!-- Do not use CSS 'order' property to rearrange navigation items differently per template -->
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Same DOM order and same CSS flex order on every page template -->

Navegación dinámica reordenada por algoritmo — Incorrecto

<!-- JavaScript reorders nav links based on most-visited analytics without user action -->
<script>
  // Anti-pattern: fetches user behaviour data and reorders nav items automatically
  fetch('/api/user-nav-preferences').then(r => r.json()).then(order => {
    const nav = document.querySelector('nav ul');
    order.forEach(id => nav.appendChild(document.getElementById(id)));
  });
</script>
<nav aria-label='Main navigation'>
  <ul>
    <li id='nav-home'><a href='/'>Home</a></li>
    <li id='nav-products'><a href='/products'>Products</a></li>
    <li id='nav-about'><a href='/about'>About</a></li>
    <li id='nav-contact'><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Navegación dinámica reordenada por algoritmo — Correcto

<!-- If personalisation is desired, require an explicit user action and keep order stable otherwise -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Personalisation button lets user reorder — change only applies after they interact -->
<button type='button' aria-controls='main-nav-list' id='customize-nav'>Customize Navigation Order</button>
<!-- The user-chosen order is then persisted consistently across all pages -->

Errores comunes

• Usar diferentes plantillas de CMS que definen la navegación de forma independiente, lo que hace que con el tiempo se introduzcan diferencias sutiles en el orden a medida que las plantillas se actualizan por separado en lugar de a partir de un único componente o parcial compartido.
• Promocionar elementos de navegación "destacados" o "estacionales" a diferentes posiciones basándose en campañas de marketing sin garantizar que el resto del orden de la navegación permanezca sin cambios; por ejemplo, mover temporalmente "Sale" a la posición dos en algunas páginas y a la posición cinco en otras.
• Usar CSS order, flex-direction: row-reverse o posicionamiento con CSS Grid para reordenar visualmente los elementos de navegación de forma diferente entre plantillas de página, creando una discrepancia entre el orden visual (que ven las personas videntes) y el orden en el DOM (que siguen las personas usuarias de teclado y lector de pantalla).
• Insertar elementos de navegación sensibles al contexto en posiciones arbitrarias; por ejemplo, añadir un enlace "Back to Category" como segundo elemento en las páginas de producto pero no en otras páginas, desplazando todos los elementos posteriores una posición hacia abajo y rompiendo la secuencia esperada.
• Permitir que plataformas de A/B testing o analítica reordenen los enlaces de navegación como parte de variantes de experimentos, sin tener en cuenta que el reordenamiento se aplica de forma inconsistente entre páginas y sesiones.
• Tratar la ruta de migas de pan como si estuviera exenta de este criterio cuando en realidad es un mecanismo de navegación repetido; las migas de pan que aparecen en diferentes posiciones en relación con otros elementos de la página entre distintas plantillas también violan el 3.2.3.
• Reordenar la navegación del pie de página de forma diferente a la navegación principal cuando los enlaces del pie duplican la navegación principal; si ambas aparecen en todas las páginas, ambas deben mantener un orden consistente de forma independiente y en relación entre sí.
• Aplicar mejoras de navegación impulsadas por JavaScript que reordenan elementos en función de la posición de scroll, el tamaño de la ventana o datos de sesión sin intervención de la persona usuaria; por ejemplo, un mega-menú que muestra dinámicamente diferentes categorías de nivel superior según la sección del sitio en la que se encuentre la persona.
• No auditar la consistencia de la navegación después de un rediseño del sitio o una migración de CMS, asumiendo que las personas desarrolladoras reproducirán de forma natural el orden original cuando en realidad distintos tipos de página son reconstruidos desde cero por diferentes miembros del equipo.
• Confundir "navegación consistente" con "misma navegación en todas las páginas"; los equipos a veces concluyen erróneamente que añadir o eliminar elementos de navegación para ciertos roles de usuario (por ejemplo, personas con sesión iniciada frente a invitadas) viola el 3.2.3. No es así, siempre que el orden relativo de los elementos compartidos permanezca sin cambios.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial n.º 2025/10 de Turquía, publicada en el Boletín Oficial (n.º 32933) el 21 de junio de 2025, establece obligaciones vinculantes de accesibilidad para una amplia gama de entidades públicas y privadas que operan servicios digitales en Turquía. La Circular exige la conformidad con normas de accesibilidad reconocidas internacionalmente —siendo las WCAG 2.2 Nivel AA el principal referente técnico— y vincula el cumplimiento con el Erişilebilirlik Logosu (Logotipo de Accesibilidad), una marca de certificación emitida por el Ministerio de Familia y Servicios Sociales a las entidades que alcanzan el umbral de accesibilidad requerido.

WCAG 3.2.3 Navegación consistente es un criterio de Nivel AA, lo que significa que es un requisito obligatorio para las entidades que buscan obtener el Erişilebilirlik Logosu. Las organizaciones que no proporcionen una navegación consistente en sus servicios digitales no alcanzarán el perfil completo de conformidad AA requerido para la certificación, independientemente de su desempeño en otros criterios.

Los siguientes tipos de entidades están cubiertos por la Circular Presidencial 2025/10 y, por lo tanto, deben tratar el cumplimiento del 3.2.3 como una obligación legal y no como una recomendación de buenas prácticas:

• Instituciones públicas y organismos gubernamentales de todos los niveles, incluidos ministerios, municipios y organismos vinculados al Estado, cuyos sitios web y portales digitales deben ser navegables de forma consistente en todas sus secciones.
• Plataformas de comercio electrónico que operan en Turquía, donde la consistencia de la navegación es especialmente crítica dado que las personas usuarias se desplazan entre páginas de inicio, categoría, producto, carrito y pago, todas las cuales suelen compartir la misma barra de navegación.
• Bancos e instituciones financieras regulados por la legislación bancaria turca, cuyos portales de banca en línea y sitios web informativos deben proporcionar una navegación predecible para atender a todas las personas clientas, incluidas aquellas con discapacidades cognitivas o motoras.
• Hospitales y proveedores de servicios sanitarios, donde las personas pacientes —a menudo en situaciones de estrés— dependen de una navegación consistente para encontrar la reserva de citas, resultados de pruebas e información de contacto de emergencia sin fricción cognitiva.
• Empresas de telecomunicaciones con 200,000 o más abonados, cuyos portales de clientes, sitios de soporte e interfaces de gestión de cuentas deben mantener la consistencia de la navegación en potencialmente miles de páginas y plantillas de cara a la persona usuaria.
• Agencias de viajes y empresas de transporte privado, donde los flujos de reserva en varios pasos que abarcan páginas de búsqueda, selección, datos de pasajeras y pago deben presentar la navegación en un orden consistente a lo largo de todo el recorrido.
• Colegios privados autorizados por el Ministerio de Educación Nacional (MoNE), cuyos sitios web atienden a estudiantes, familias y personal —incluidas personas con dificultades de aprendizaje que dependen en gran medida de una navegación predecible para acceder a recursos educativos.

Para las organizaciones en Turquía que desarrollan o auditan servicios digitales, el 3.2.3 debe incorporarse al proceso de aseguramiento de la calidad en la fase de diseño de plantillas y componentes. Usar un componente de navegación compartido renderizado a partir de una única fuente de verdad —ya sea un include del lado del servidor, un componente de un framework de front-end o un elemento global de un CMS headless— es tanto el enfoque técnico más fiable como la postura de cumplimiento más defendible según los requisitos de la Circular. Las auditorías de accesibilidad presentadas como parte del proceso de solicitud del Erişilebilirlik Logosu deben incluir la verificación del orden de la navegación entre páginas como un paso de prueba documentado.