Navegación: ayuda a encontrar y volver

Una navegación útil responde a tres preguntas: dónde estoy, qué puedo encontrar y cómo continúo. Su estructura debe reflejar necesidades reconocibles para el público. Copiar el organigrama interno o inventar etiquetas sugerentes puede obligar a adivinar el destino de cada enlace.

Organiza antes de dibujar el menú

Reúne contenidos y tareas frecuentes. Agrupa lo que la persona esperaría encontrar junto y escribe qué incluye cada grupo. Si dos apartados compiten por el mismo contenido, resuelve su relación antes de añadir ambos a la cabecera. Una estructura puede tener caminos alternativos sin duplicar el artículo: enlaza el mismo recurso desde los contextos donde resulte útil.

Caso didáctico: alguien quiere entender por qué su formulario se abandona. «Mejorar formularios» anticipa una solución; «Soluciones 360» no informa de qué encontrará. Para explorar agrupaciones puedes usar card sorting; para comprobar si una estructura permite encontrar destinos, tree testing. Estas técnicas responden preguntas distintas y necesitan tareas que no revelen la respuesta.

Etiquetas concretas y coherentes

Prefiere nombres que permitan anticipar el contenido. Mantén coherencia entre enlace, título de la página y ruta. Si llamas «Herramientas» a un directorio, evita que el destino se titule simplemente «Potencia tu proyecto». Cuando un término técnico sea necesario, acompáñalo de contexto donde aparezca por primera vez.

No hay un número universal de elementos ideal para cualquier menú. Evalúa si las opciones se distinguen y representan las tareas relevantes. Un menú corto que oculta una tarea importante puede funcionar peor que uno algo más amplio y bien organizado.

Semántica de una navegación convencional

<nav aria-label="Principal">
  <ul>
    <li><a href="/como-medir/">Métodos</a></li>
    <li><a href="/herramientas/" aria-current="page">Herramientas</a></li>
    <li><a href="/recursos/">Recursos</a></li>
  </ul>
</nav>

Ejemplo HTML implementable para una página de Herramientas; actualiza aria-current según el destino real. El atributo comunica la página actual dentro del conjunto. Refuerza la señal visual con algo más que un cambio de color, como subrayado o peso. No añadas roles menu y menuitem: implican una interacción de aplicación que no necesitan estos enlaces.

Submenús: separa navegar de desplegar

Si una categoría tiene una página propia y además subpáginas, evita que el mismo gesto signifique a la vez abrir y navegar. Puedes ofrecer un enlace a la categoría y un botón adyacente con un nombre como «Mostrar apartados de Métodos». El botón mantiene aria-expanded y la relación con el panel; los enlaces continúan siendo enlaces.

El submenú debe poder abrirse sin depender de hover. Comprueba Tab, Mayús+Tab, Intro/Espacio en el botón y un cierre comprensible. Escape puede cerrar el desplegable y devolver el foco al control. Si decides cerrar cuando el foco abandona la región, comprueba que no se cierra mientras la persona pasa del botón a sus enlaces.

Menú móvil sin perder el contexto

Un botón «Menú» suele comunicar mejor su función que un icono sin nombre. Si abre un panel modal, deben gestionarse entrada del foco, confinamiento mientras está abierto, Escape, cierre visible y retorno al disparador. Si solo expande navegación dentro del flujo, no impongas una trampa modal innecesaria. Son comportamientos diferentes aunque ambos se llamen menú móvil.

Revisa qué ocurre al pasar de móvil a escritorio con el panel abierto: no pueden quedar enlaces duplicados en el orden de foco, un fondo bloqueado o un control visible marcado como colapsado. Comprueba también que todos los destinos caben con zoom y textos largos.

Migas, índices y enlaces relacionados

Las migas muestran la jerarquía del contenido, no necesariamente las páginas visitadas antes. Úsalas cuando aportan orientación en varios niveles. Un índice dentro de un artículo ayuda a recorrer secciones y debe llevar a encabezados identificables. Los recursos relacionados enlazan necesidades próximas: después de aprender ARIA, tiene sentido continuar con componentes.

Distingue estas navegaciones mediante nombres accesibles, por ejemplo «Ruta de navegación» y «En esta guía». Evita convertir cada pequeña colección de enlaces en una región adicional: demasiadas zonas compiten entre sí. En enlaces a anclas, comprueba que una cabecera fija no tapa el encabezado de destino.

Búsqueda que ayuda cuando no conoces la estructura

La búsqueda complementa la navegación. Necesita etiqueta, acción, consulta conservada y resultados que se puedan distinguir. Muestra qué se buscó y ofrece una salida útil cuando no hay coincidencias. No uses la misma pantalla para un servicio caído y para una consulta sin resultados.

Analizar consultas puede revelar vocabulario que falta en los títulos o contenido que la gente espera. Una búsqueda repetida no prueba por sí sola que el menú esté mal: puede ser la estrategia preferida de esa persona. Contrasta los registros con observación de tareas y trata las consultas con cuidado si pueden contener datos personales.

Prueba la estructura y después la interacción

1. Formula una tarea realista sin repetir la etiqueta del enlace correcto.
2. Observa primera elección, retrocesos, destinos equivocados y finalización. Anota si hubo ayuda.
3. Pregunta al final qué esperaba encontrar tras una etiqueta dudosa; no orientes durante la tarea.
4. Repite recorridos con teclado, zoom y menú móvil.
5. Comprueba enlaces, página actual, migas, vuelta desde resultados y estado sin coincidencias.
6. Agrupa problemas de vocabulario, estructura e interacción: requieren correcciones diferentes.

Un primer clic correcto no demuestra que el proceso posterior sea claro. Una página encontrada con ayuda no equivale a una encontrada sin ayuda. Define el resultado antes de medirlo y conserva evidencia que permita repetir la revisión después de cambiar la navegación.

Fuentes y siguientes pasos

• WAI: estructura de página y regiones
• APG: navegación con desplegables sin roles de menú
• APG: diálogo modal
• Componentes: búsqueda, filtros y paginación
• Métodos de evaluación
• Herramientas para investigar