01 · Concepto
Wayfinding: construir un mapa mental
Orientarse consiste en comprender la ubicación actual, reconocer las opciones disponibles y anticipar adónde conduce cada camino.
En una interfaz, las personas forman un mapa mental mediante el título de la página, la navegación, los encabezados, las migas de pan, los enlaces y la posición del foco. Si esas señales cambian, desaparecen o solo son visuales, la experiencia se vuelve impredecible.
Principio esencial
La navegación debe responder continuamente tres preguntas: “¿Dónde estoy?”, “¿Qué puedo hacer aquí?” y “¿Cómo llego al siguiente lugar?”.
Entre páginas
Menú principal, búsqueda, mapa del sitio, migas de pan y enlaces relacionados permiten moverse por el sitio.
Dentro de la página
Regiones, encabezados, índice interno y enlaces de salto permiten llegar directamente a una sección.
02 · Señales de orientación
Una ruta se construye con varias pistas
Ningún mecanismo resuelve por sí solo toda la orientación. Las señales deben complementarse y conservar un significado consistente.
Título de página
Identifica el contenido en la pestaña, el historial, los marcadores y los resultados de búsqueda.
Migas de pan
Muestran la posición dentro de la jerarquía y ofrecen caminos para regresar a niveles anteriores.
Regiones
header, nav, main, aside y footer convierten el diseño visual en un mapa programático.
Encabezados
Nombran secciones y permiten explorar la estructura sin leer todo el contenido.
Foco
Indica qué elemento recibirá la próxima acción y conserva un recorrido comprensible.
Enlaces descriptivos
Comunican el destino o propósito antes de activarse, incluso cuando se presentan fuera del párrafo.
03 · Personas y contextos
¿A quién beneficia?
La orientación clara reduce el esfuerzo necesario para encontrar información y recuperar el contexto.
- Personas que utilizan lectores de pantalla: pueden saltar entre regiones, encabezados y enlaces sin recorrer linealmente toda la página.
- Personas que navegan con teclado: evitan tabular repetidamente por cabeceras y menús mediante enlaces para omitir bloques.
- Personas con baja visión: mantienen la ubicación al ampliar el contenido y reconocen el foco visible.
- Personas con discapacidades cognitivas o de aprendizaje: encuentran referencias estables y reducen la carga de recordar rutas cambiantes.
- Personas en pantallas pequeñas o sitios desconocidos: localizan antes el contenido principal y comprenden la organización general.
04 · Barreras frecuentes
Cuándo una persona puede perderse
05 · Criterios de diseño
Qué debe comprobarse
Estos mecanismos convierten el concepto de orientación en decisiones verificables.
Título y encabezado principal descriptivos
El título identifica la página en el navegador y el encabezado principal comunica su propósito dentro del contenido.
Relacionado: WCAG 2.4.2 y 2.4.6
Mecanismo para omitir bloques repetidos
Un enlace “Saltar al contenido principal” debe ser uno de los primeros controles y trasladar navegación y foco al destino.
Relacionado: WCAG 2.4.1 · Nivel A
Regiones semánticas identificables
Utiliza elementos HTML nativos para cabecera, navegación, contenido principal y pie. Si existen varias navegaciones, proporciona nombres que las diferencien.
Relacionado: WCAG 1.3.1 y 2.4.1
Orden y visibilidad del foco
La secuencia debe conservar significado y el indicador debe permanecer visible, incluso junto a barras fijas o contenido superpuesto.
Relacionado: WCAG 2.4.3, 2.4.7 y 2.4.11
Enlaces que explican su propósito
El texto del enlace, por sí solo o con su contexto programático, debe permitir decidir si conviene seguirlo. Evita expresiones genéricas repetidas.
Relacionado: WCAG 2.4.4 · Nivel A
Navegación consistente y múltiples caminos
Los mecanismos repetidos conservan el mismo orden. En conjuntos de páginas, ofrece más de una forma de localizar contenido, como menú, búsqueda o mapa del sitio.
Relacionado: WCAG 2.4.5 y 3.2.3 · Nivel AA
06 · Ejemplo aplicado
De una página visual a un mapa navegable
Problema
Estructura genérica
<div class="menu">…</div>
<div class="content">
<a href="informe.pdf">Clic aquí</a>
</div>- No identifica las regiones.
- No permite omitir el menú repetido.
- El enlace no explica su destino.
Solución
Estructura y nombres explícitos
<a href="#main">Saltar al contenido</a>
<nav aria-label="Principal">…</nav>
<main id="main">
<a href="informe.pdf">Descargar informe anual</a>
</main>- Expone un mapa de regiones.
- Ofrece una ruta directa al contenido.
- El destino del enlace es comprensible.
Decisión clave: lo que se distingue visualmente también debe poder distinguirse mediante la estructura y los nombres programáticos.
07 · Práctica
Comprueba lo aprendido
Realiza un recorrido corto y aplica los criterios de orientación a una página real.
Actividad 1: explora el mapa semántico
Activa cada región para descubrir qué orientación aporta. Puedes recorrerlas con Tab.
Explora las cinco regiones.
Actividad 2: reescribe enlaces ambiguos
Escribe textos que expliquen el destino sin depender del párrafo que los rodea.
Actividad 3: selecciona la ruta adecuada
Asocia cada necesidad con el mecanismo de navegación más útil.
08 · Ficha rápida
Navegación y orientación en seis preguntas
- ¿Dónde estoy?
- Revisa el título, el H1, la página actual y las migas de pan.
- ¿Puedo saltar?
- Ofrece una vía para omitir navegación y bloques repetidos.
- ¿Existe un mapa?
- Comprueba regiones, encabezados e índice interno.
- ¿Veo el foco?
- Recorre la página y confirma su orden y visibilidad.
- ¿Entiendo los enlaces?
- Lee cada enlace fuera del párrafo y comprueba si conserva sentido.
- ¿La ruta se mantiene?
- Compara el orden de la navegación en varias páginas.
Resultado
Progreso de las actividades
Completa las tres actividades para terminar el tutorial.