La guía completa de accesibilidad para navegación y arquitectura de la información: construir una web “en la que nunca te pierdas” con encabezados, landmarks, migas de pan, búsqueda del sitio y títulos de página (WCAG 2.1 AA)

Resumen rápido (puntos clave primero)

• El núcleo de una “experiencia” accesible no es primero la interacción, sino comprender “¿Dónde estoy, qué puedo hacer aquí y adónde puedo ir?”
• Para lograrlo, el set esencial de 7 piezas es: (1) Título de página (2) Estructura de encabezados (3) Landmarks (header/nav/main/footer, etc.) (4) Enlaces de salto (skip links) (5) Migas de pan (breadcrumbs) (6) Búsqueda (7) Indicación de ubicación actual.
• Aunque lo visual se vea ordenado, si los encabezados se saltan niveles o los landmarks son vagos, los usuarios de lectores de pantalla y de teclado están, en la práctica, caminando sin mapa.
• La navegación no mejora solo por “añadir más menús”. La clave es reducir la probabilidad de perderse mediante jerarquía clara, nombres claros y consistencia.
• Este artículo incluye plantillas de estructura (ejemplos HTML), reglas de naming, errores comunes y una prueba rápida de 5 minutos.

Lectores objetivo (específicos): editores web, diseñadores IA/UX, ingenieros front-end, PMs/directores, responsables de sitios municipales/públicos, operadores de e-commerce/booking, QA/testers, responsables de design systems
Nivel de accesibilidad: apuntando a WCAG 2.1 AA (principalmente 1.3.1, 2.4.1, 2.4.2, 2.4.3, 2.4.6, 2.4.7, 3.2.3, 4.1.2)

1. Introducción: la navegación es “accesibilidad que empiezas a usar antes de leer”

La web no es solo para leer: es un lugar para buscar, moverse, comparar y completar tareas.
Pero cuando la navegación es confusa, la gente pierde de vista dónde está incluso antes de llegar a qué debería hacer. En particular, los usuarios de lectores de pantalla no pueden apoyarse en la colocación visual de menús o en pistas de espaciado. Los usuarios de teclado pueden verse obligados a pulsar Tab decenas de veces para llegar a su destino si el orden de tabulación y los “encabezados/landmarks” están rotos.

La otra cara es que, cuando la arquitectura de la información y la navegación están bien estructuradas, la accesibilidad se vuelve sorprendentemente estable. Incluso si crecen las páginas y el contenido se actualiza, baja la “sensación de estar perdido”—porque los usuarios de tecnología asistiva pueden reutilizar el mismo mapa.

2. “Perderse” suele venir de siete causas: primero, arma las piezas del mapa

La confusión de navegación casi nunca se debe a tecnología avanzada: normalmente es un problema de piezas de mapa ausentes. Primero, verifica si estos siete elementos están presentes:

1. Título de página: el nombre que aparece en la pestaña del navegador (“¿en qué página estoy?”)
2. Estructura de encabezados: una jerarquía que se pueda seguir (h1 → h2 → h3 …)
3. Landmarks: las regiones principales son claras (header/nav/main/footer/aside, etc.)
4. Enlace de salto (skip link): un primer paso para saltar directamente al contenido principal
5. Migas de pan (breadcrumbs): la jerarquía y la ubicación actual son visibles
6. Búsqueda del sitio: una “salida de emergencia” para encontrar cosas
7. Indicación de ubicación actual: “dónde estás ahora” queda claro visualmente y para tecnología asistiva

Este set de siete piezas funciona sin importar el tipo de producto (sitios corporativos, e-commerce, gobierno, SaaS).

3. Títulos de página: la etiqueta de “ubicación actual” de menor costo y mayor impacto

3.1 Un buen patrón de título de página

Para usuarios de tecnología asistiva, el título de página es la “placa de identificación” de la pantalla. Patrones recomendados:

• “Nombre específico de la página | Nombre del sitio”
• Para listados: “Nombre de categoría (Lista) | Nombre del sitio”
• Para detalle: “Nombre del producto (Detalles) | Nombre del sitio”

Ejemplos:

• “Planes de precios | Servicio XX”
• “Declaración de accesibilidad | Empresa XX”
• “Bolso Tote A4 (Detalles) | Tienda XX”

3.2 Malos ejemplos (comunes)

• Todas las páginas se titulan “TOP”
• Todas las páginas son “Untitled” / “Sin título”
• Demasiado largo y lleno de keywords (se pierde el punto)

3.3 SPA / sitios con poca navegación: una advertencia clave

Si el título no se actualiza cuando cambia la vista, los usuarios pueden interpretarlo como “sigue siendo la misma pantalla”. Estandariza “actualizar el título al rutear” como parte de tu práctica de implementación.

4. Estructura de encabezados: construye el “índice” del lector de pantalla

4.1 Reglas más importantes

• Usa un solo h1 en principio (el tema de la página)
• Mantén los encabezados en orden (no saltes de h2 directamente a h4)
• Elige encabezados por jerarquía semántica, no por tamaño visual

4.2 “Accidentes” típicos por priorizar lo visual

• Convertir encabezados en divs en negrita en lugar de encabezados semánticos
• Múltiples h1 (por ejemplo, usar h1 para títulos de tarjetas)
• Separar secciones solo con líneas decorativas

4.3 Un ejemplo usable de encabezados

<h1>Envíos y devoluciones</h1>

<h2>Envíos</h2>
<h3>Tiempo de entrega</h3>
<h3>Costos de envío</h3>

<h2>Devoluciones</h2>
<h3>Elegibilidad</h3>
<h3>Proceso de reembolso</h3>

Si los encabezados están estructurados, los usuarios de lectores de pantalla pueden saltar directamente usando la “lista de encabezados”. También beneficia a editores y redactores, porque la estructura se vuelve más difícil de romper durante actualizaciones.

5. Landmarks: comunica las “grandes secciones” de la página a la tecnología asistiva

5.1 Estructura básica recomendada de landmarks

<header>
  <!-- Logo, utilidades globales, etc. -->
</header>

<nav aria-label="Navegación global">
  <!-- Enlaces principales -->
</nav>

<main id="content">
  <!-- Contenido principal -->
</main>

<footer>
  <!-- Pie de página -->
</footer>

5.2 Cuando hay varias navegaciones: cómo mantenerlas claras

Con navegación de cabecera, navegación de pie, tabla de contenidos en página, etc., es común tener varios elementos nav. Diferéncialos con aria-label:

• “Navegación global”
• “Tabla de contenidos en la página”
• “Navegación del pie de página”

5.3 Cuándo usar aside

Pon enlaces relacionados e información de apoyo en aside. Pero no empujes los flujos principales del usuario a aside, porque se pueden pasar por alto más fácilmente; mantén las rutas primarias dentro de main.

6. Enlaces de salto (skip links): la amabilidad de llegar al “contenido principal” en el Tab #1

Los skip links son especialmente valiosos para usuarios de teclado. Cuanto más largo sea el encabezado, más define la experiencia ese primer Tab que decide “¿puedo saltar al contenido?”.

<a class="skip" href="#content">Saltar al contenido principal</a>
<main id="content" tabindex="-1">…</main>

.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; padding:.5rem .75rem; background:#111; color:#fff; border-radius:.5rem; }

La clave es “se vuelve visible al recibir foco”. No tiene que estar visible siempre.

7. Migas de pan (breadcrumbs): muestra jerarquía y ubicación “con palabras”, no solo decoración

Las migas de pan no deberían ser solo estilo visual. Usa una estructura que comunique jerarquía.

<nav aria-label="Migas de pan">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/guide/">Guía de usuario</a></li>
    <li aria-current="page">Devoluciones</li>
  </ol>
</nav>

• Usa aria-current=“page” para hacer explícita la ubicación actual
• Usa ol para comunicar naturalmente “niveles”
• Mantén naming consistente en todo el sitio (“Inicio”, “Categoría”, “Nombre de página”)

8. Indicación de ubicación actual: construye “no te pierdas” antes de “volver”

8.1 Página actual en la navegación global

Resalta visualmente (subrayado/negrita/fondo) y también usa aria-current para tecnología asistiva:

<nav aria-label="Navegación global">
  <a href="/about/" aria-current="page">Acerca de</a>
  <a href="/service/">Servicios</a>
  <a href="/contact/">Contacto</a>
</nav>

8.2 Redacción UI que hace entendible “¿dónde estoy?”

Si las etiquetas del menú son demasiado abstractas, ni siquiera mostrar la ubicación actual evitará la confusión. Evita etiquetas demasiado amplias como “Info”, “Otros” o “Soporte” a menos que las aclares.

• “Soporte” → “Ayuda y soporte”
• “Info” → “Guía de usuario” / “Noticias”
• “Otros” → (idealmente eliminar y dividir en elementos específicos)

9. Búsqueda del sitio: la “salida final” para quien se perdió—hazla accesible

La búsqueda es la rueda de entrenamiento de la navegación. En sitios con mucho contenido, la accesibilidad de búsqueda es, en la práctica, la usabilidad del sitio.

9.1 Bases del formulario de búsqueda

• Usa una etiqueta visible (no dependas solo del placeholder)
• Proporciona ejemplos con aria-describedby
• No dejes el botón solo con ícono (si lo es, aria-label es obligatorio)

<form role="search" aria-label="Búsqueda del sitio">
  <label for="q">Buscar en este sitio</label>
  <input id="q" name="q" type="search" aria-describedby="q-hint">
  <p id="q-hint">Ejemplo: devoluciones, envíos, factura</p>
  <button type="submit">Buscar</button>
</form>

9.2 Presentación accesible de resultados

• Muestra el número de resultados como texto
• Tras filtrar, es útil anunciar actualizaciones con role="status"
• Si hay 0 resultados, di qué hacer (sugerencias de reformulación, enlaces a categorías)

Ejemplo de copy (0 resultados):

“No se encontraron resultados. Prueba con otras palabras clave o navega por la Guía de usuario.”

10. Errores comunes: formas típicas en que se rompe la navegación

11. La prueba rápida de 5 minutos: chequeos mínimos para navegación e IA

1. El título de página coincide con el contenido (obvio desde la pestaña)
2. Hay un h1, y los niveles de encabezados no saltan
3. Los landmarks (nav/main, etc.) permiten saltar entre regiones principales
4. El primer Tab llega a un skip link usable
5. La navegación global indica ubicación actual y tiene aria-current
6. Las migas de pan revelan jerarquía y la página actual
7. El formulario de búsqueda tiene label, y los resultados muestran cantidad + camino para 0 resultados
8. Solo con teclado, puedes “encontrar → moverte → volver” de punta a punta

Si esto pasa, los fallos grandes de navegación quedan en gran parte prevenidos.

12. Valor concreto para los públicos objetivo

• Usuarios de lectores de pantalla: encabezados, landmarks y migas de pan permiten rutas más cortas y navegación de “entender mientras exploras”.
• Usuarios de teclado: skip links y orden lógico reducen tiempo de movimiento y fatiga.
• Personas con diferencias cognitivas: ubicación y jerarquía claras reducen ansiedad y mejoran finalización de tareas.
• Usuarios mayores / usuarios con zoom: una estructura fuerte facilita no perder contexto con zoom.
• Equipos de operaciones: encabezados y naming consistentes estabilizan la calidad durante actualizaciones y a menudo mejoran SEO y navegación interna.

13. Evaluación de nivel de accesibilidad (qué logra este artículo)

• Directamente vinculado a WCAG 2.1 AA
  • 2.4.2 Página con título: títulos apropiados
  • 2.4.1 Evitar bloques: skip links
  • 1.3.1 Información y relaciones: estructura mediante encabezados/listas/landmarks
  • 2.4.6 Encabezados y etiquetas: etiquetas claras para búsqueda y navegación
  • 2.4.3 Orden del foco / 2.4.7 Foco visible: navegación por teclado estable
  • 3.2.3 Navegación consistente: naming y ubicación consistentes
  • 4.1.2 Nombre, rol, valor: uso correcto de aria-current, aria-label, etc.
• La arquitectura de información “nunca te pierdas” soporta no solo cumplimiento AA, sino también confianza del usuario y tasas de finalización.

14. Conclusión: la navegación está hecha de “mapas amables”

1. Usa títulos de página, encabezados y landmarks para aclarar “estás aquí”.
2. Añade skip links para que se pueda entrar al contenido principal por la ruta más corta.
3. Usa migas de pan y marcadores de ubicación actual para expresar jerarquía y posición con palabras.
4. Trata la búsqueda como salida para quien se perdió—etiquétala y presenta resultados con cuidado.
5. La consistencia en naming y ubicación lo es todo; vuelve más concretas las etiquetas abstractas.
6. Haz de la prueba rápida de 5 minutos un hábito para que las actualizaciones no reintroduzcan confusión.

La navegación puede no ser llamativa, pero sostiene la tranquilidad del usuario como un “mapa”.
Mejorar ese mapa es trabajo esencial de diseño para no dejar a nadie atrás. Ojalá tu sitio se vuelva un lugar donde cualquiera pueda llegar a su objetivo sin perderse.

Enlaces de referencia (fuentes primarias)

• WCAG 2.1 (W3C)
• WAI Landmarks (W3C WAI)
• Headings and Landmarks (MDN)
• aria-current (MDN)