Ver contenido
Navegación Consistente: Por Qué los Menús Predecibles Importan para la Accesibilidad
Introducción
Cuando navegas un sitio web con frecuencia, desarrollas expectativas sobre dónde encontrar cada elemento. El logo está arriba a la izquierda, el menú principal debajo del encabezado, el buscador a la derecha. Si un día esos elementos cambian de posición o de orden, la experiencia se vuelve frustrante. Para una persona vidente esto es una molestia menor; para alguien que navega con lector de pantalla o que tiene una discapacidad cognitiva, puede significar la imposibilidad de usar el sitio.
WCAG 2.2 aborda este problema directamente en el criterio de éxito 3.2.3, Navegación Consistente, un requisito de nivel AA. Este artículo explica qué exige el criterio, a quién beneficia, cuáles son los errores más comunes, y qué variaciones son aceptables dentro del estándar.
Qué exige WCAG 3.2.3
El criterio establece una regla clara: los mecanismos de navegación que se repiten en múltiples páginas dentro de un sitio web deben aparecer en el mismo orden relativo cada vez que se presenten, a menos que el usuario inicie un cambio.
La expresión “mismo orden relativo” es precisa. No significa que todas las páginas deban tener exactamente los mismos elementos de menú, sino que los elementos que sí aparecen deben mantener su posición relativa entre sí. Si en la página de inicio el menú muestra Inicio, Productos, Nosotros y Contacto en ese orden, entonces en cualquier otra página donde aparezcan esos enlaces, Inicio debe preceder a Productos, Productos debe preceder a Nosotros, y así sucesivamente.
El criterio permite tres tipos de variación legítima:
- Agregar elementos: Una página de categoría puede incluir submenús adicionales sin violar la consistencia, siempre que los elementos principales mantengan su orden.
- Eliminar elementos: Una página puede ocultar elementos del menú (por ejemplo, basado en roles de usuario), siempre que los elementos visibles conserven su orden relativo original.
- Cambios iniciados por el usuario: Si el usuario activa una opción de personalización para reordenar el menú, el cambio es aceptable porque fue solicitado explícitamente.
Quién se beneficia y por qué
La navegación consistente beneficia a todos los usuarios, pero su impacto es especialmente significativo para grupos específicos:
Usuarios de lectores de pantalla: Cuando una persona ciega navega un sitio, memoriza la estructura del menú. “El tercer enlace es Servicios, el cuarto es Contacto.” Si el orden cambia entre páginas, pierde su mapa mental y debe explorar toda la navegación desde cero cada vez. Según la técnica G61 del W3C, mantener el orden consistente permite a estos usuarios desarrollar estrategias de navegación eficientes que se mantienen a lo largo de toda la sesión.
Personas con discapacidades cognitivas: La previsibilidad reduce la carga cognitiva. Cuando la interfaz se comporta de manera consistente, el usuario puede dedicar su atención al contenido en lugar de a aprender una nueva disposición en cada página.
Usuarios de teclado y personas con discapacidades motoras: Estos usuarios desarrollan memoria muscular para el orden de tabulación. Si la navegación cambia de posición, deben recalcular cuántas pulsaciones de Tab necesitan para llegar a cada destino, lo que incrementa tanto el esfuerzo como la posibilidad de error.
Usuarios con baja visión: Emplean magnificadores de pantalla que muestran solo una porción del viewport. Si la navegación mantiene su posición visual, saben exactamente hacia dónde desplazar la vista para encontrarla.
Errores comunes que rompen la consistencia
Los tres patrones más frecuentes que violan WCAG 3.2.3 son el reordenamiento dinámico, el cambio de posición visual, y las diferencias entre versión móvil y escritorio.
Reordenamiento basado en analíticas
Algunos sitios reordenan los elementos del menú según su popularidad. La lógica parece razonable: “poner primero lo que más visitan los usuarios”. Sin embargo, esto crea una experiencia impredecible donde el menú cambia con cada visita o incluso durante la misma sesión.
// Incorrecto: reordena según popularidad
navegacion.sort((a, b) =>
paginasPopulares.indexOf(b.url) - paginasPopulares.indexOf(a.url)
);
// Correcto: orden fijo definido en configuración
const navegacion = [
{ etiqueta: 'Inicio', url: '/' },
{ etiqueta: 'Productos', url: '/productos' },
{ etiqueta: 'Nosotros', url: '/nosotros' },
{ etiqueta: 'Contacto', url: '/contacto' }
];
Cambio de posición entre páginas
Un menú que aparece en el header de la página de inicio pero se desplaza a un sidebar en páginas interiores viola el espíritu del criterio. Aunque técnicamente el orden de los enlaces puede ser el mismo, el cambio de ubicación visual desoriente a usuarios que dependen de la posición espacial para encontrar la navegación.
Diferencias entre móvil y escritorio
El menú hamburguesa en móvil debe contener exactamente los mismos elementos en el mismo orden que la navegación de escritorio. Es aceptable cambiar la presentación visual (menú desplegable vertical en lugar de barra horizontal), pero el contenido y la secuencia deben ser idénticos.
Variaciones que sí son aceptables
No toda diferencia entre páginas constituye una violación. WCAG 3.2.3 permite explícitamente estas situaciones:
Navegación contextual adicional: Una sección de productos puede incluir una navegación secundaria de subcategorías, claramente diferenciada con su propio aria-label, sin afectar la navegación principal global.
Indicador de página actual: Resaltar visualmente el enlace de la página activa mediante aria-current="page" y una clase CSS es recomendable y no afecta la consistencia, ya que no cambia ni el orden ni la posición de los elementos.
Menús expandibles: Los submenús que se despliegan bajo un elemento padre son aceptables porque la navegación principal mantiene su orden. Los elementos hijos se revelan dentro de la estructura existente.
Componentes que deben mantener consistencia
El criterio 3.2.3 aplica a todos los mecanismos de navegación repetidos, no solo al menú principal:
| Componente | Requisito de consistencia |
|---|---|
| Navegación principal | Mismo orden de enlaces en todas las páginas |
| Navegación de utilidad | Login, carrito, ayuda siempre en el mismo orden |
| Enlaces del footer | Mismo orden en todo el sitio |
| Formulario de búsqueda | Misma posición visual en cada página |
| Migas de pan | Estructura consistente (la jerarquía varía según la página) |
| Navegación secundaria | Mismo orden cuando aparece en múltiples páginas |
Cómo verificar la consistencia
La verificación más efectiva es manual y directa:
- Visita la página de inicio y anota el orden exacto de la navegación principal
- Navega a al menos tres páginas diferentes del sitio
- En cada página, comprueba que los elementos del menú aparecen en el mismo orden
- Verifica que la navegación ocupa la misma posición visual
- Reduce el viewport a tamaño móvil y repite las verificaciones con el menú hamburguesa
Presta atención especial a las pruebas A/B que modifican la navegación para diferentes segmentos de usuarios, los cambios de navegación tras el login (aceptable agregar elementos, no reordenar), y las variaciones regionales que podrían alterar el orden de los enlaces.
Preguntas frecuentes
¿El criterio 3.2.3 aplica solo al menú principal?
No. Aplica a cualquier mecanismo de navegación que se repita en múltiples páginas: menú principal, navegación secundaria, enlaces del footer, migas de pan, formularios de búsqueda, y barras de utilidades. Cada uno de estos componentes debe mantener su orden relativo en todas las páginas donde aparezca.
¿Puedo mostrar elementos diferentes del menú según el rol del usuario?
Sí, siempre que los elementos que permanecen visibles conserven su orden relativo original. Por ejemplo, si un usuario no autenticado ve Inicio, Productos y Contacto, un usuario administrador puede ver Inicio, Productos, Admin, Contacto. El elemento Admin se inserta, pero Inicio sigue antes de Productos, y Productos sigue antes de Contacto.
¿Las pruebas A/B en la navegación violan WCAG 3.2.3?
Si la prueba A/B cambia el orden de los elementos de navegación para un segmento de usuarios, técnicamente viola el criterio porque el usuario no inició el cambio. Las pruebas A/B que cambian estilos visuales sin alterar el orden son aceptables. Para pruebas que requieran modificar la estructura del menú, considera implementarlas como opciones de personalización que el usuario active explícitamente.
¿Cuál es la diferencia entre 3.2.3 y 3.2.4?
WCAG 3.2.3 (Navegación Consistente) se refiere al orden de los mecanismos de navegación. WCAG 3.2.4 (Identificación Consistente) se refiere a que los componentes con la misma funcionalidad tengan el mismo nombre. Son complementarios: 3.2.3 asegura que el menú esté siempre en el mismo orden, y 3.2.4 asegura que el botón de búsqueda siempre se llame “Buscar” y no a veces “Buscar” y otras “Encontrar”.
Artículos relacionados
- Guía de Implementación de Navegación Consistente - Patrones de código detallados
- Guía de Enlaces de Salto - Accesibilidad de navegación
- Hub de Cumplimiento WCAG - Todos los evaluadores de accesibilidad
Referencias
- W3C - WCAG 2.2 SC 3.2.3 Consistent Navigation
- W3C - G61 Presenting repeated components in the same order
- WebAIM - Navigation
- MDN - Navigation role