Guía Completa de Arquitectura de Información y Navegación Accesible: Landmarks, Encabezados, Enlaces de Salto, Mega Menús, Breadcrumbs y Buscador

Resumen ejecutivo (puntos clave primero)

• Trata la Arquitectura de Información (IA) como el “mapa para el orden de lectura y el movimiento”, y habilita el acceso por la ruta más corta con landmarks, encabezados y enlaces de salto.
• Construye navegación global / mega menú / breadcrumbs / buscador / mapa del sitio / índice en la página con HTML nativo + ARIA mínima para mayor robustez.
• Diseña para operación por teclado, foco visible y layouts responsivos; comunica con señales redundantes (color + forma + texto) para evitar que las personas se pierdan.
• Para páginas “perdidas” como 404 / mantenimiento / cero resultados, ofrece rutas de retorno, un tono cordial y alternativas.
• Incluye ejemplos de implementación (HTML/CSS/JS), lista operativa de verificación y prueba rápida de 5 minutos.

Lectores previstos (concretos): diseñadores UI/UX, ingenieros frontend, arquitectos de información, editores/diseñadores de contenido, PMs / directores web, QA / especialistas en accesibilidad
Nivel de accesibilidad: WCAG 2.1 AA (se recomiendan elementos de WCAG 2.2 como tamaño de objetivo cuando sea factible)

1. Introducción: la navegación es a la vez “mapa” y “atajo”

La accesibilidad web no se completa solo con color, contraste y etiquetas. También necesitas el mapa y los atajos que llevan a la gente a su destino con rapidez—es decir, arquitectura de información (IA) y navegación.
Las personas usuarias son diversas: lectores de pantalla, magnificadores, teclado, entrada por voz y uso móvil con una mano. Con landmarks (header/nav/main/aside/footer) y una estructura de encabezados correcta (h1–h6), todo el mundo puede llegar a su objetivo por la ruta más corta. Añade enlaces de salto para que quienes usan teclado salten menús repetidos y vayan directo al contenido.
Esta guía ofrece “patrones” de diseño e implementación para navegación global, mega menús, breadcrumbs, buscador, índice en página y mapas del sitio.

2. Construye el esqueleto: Landmarks + Encabezados + Enlaces de Salto

2.1 Fundamentos de Landmarks

• Marca las regiones principales con header / nav / main / aside / footer.
• Cuando existan varios nav/aside, asigna a cada uno un aria-label (p. ej., <nav aria-label="Global">).

<a class="skip" href="#content">Saltar al contenido principal</a>

<header>…logo / buscador…</header>
<nav aria-label="Global">…navegación principal…</nav>
<main id="content">…contenido específico de la página…</main>
<aside aria-label="Información relacionada">…artículos relacionados…</aside>
<footer>…enlaces del pie…</footer>

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

2.2 Mantén intacta la “escalera” de encabezados

• Usa un solo h1 por página. Después sigue la estructura lógica con h2 → h3 ….
• Elige niveles por jerarquía semántica, no por tamaño visual—controla lo visual con CSS.

2.3 Propósito de los enlaces de salto

• Reducen acciones repetitivas para usuarios de teclado. Idealmente aparece con el primer Tab.
• Coloca tabindex="-1" en main para asegurar que el foco se mueva correctamente.

<main id="content" tabindex="-1">…</main>

3. Navegación global: robusta con ARIA mínima

3.1 Manténlo simple (recomendado)

• Empieza con la estructura nativa: <nav><ul><li><a>.
• Indica la página actual con aria-current="page" y refuérzalo con color/texto.

<nav aria-label="Global">
  <ul>
    <li><a href="/" aria-current="page">Inicio</a></li>
    <li><a href="/products">Productos</a></li>
    <li><a href="/pricing">Precios</a></li>
    <li><a href="/docs">Documentación</a></li>
  </ul>
</nav>

3.2 Desplegables (patrón de disclosure)

• Usa un <button> como disparador. Refleja el estado con aria-expanded; asocia el panel con aria-controls.
• Sin trampa de foco (no fuerces el ciclo). Cierra con Esc y devuelve el foco al disparador.

<nav aria-label="Global">
  <ul>
    <li class="has-sub">
      <button aria-expanded="false" aria-controls="p1" id="b1">Productos</button>
      <div id="p1" role="region" aria-labelledby="b1" hidden>
        <ul>
          <li><a href="/products/a">A</a></li>
          <li><a href="/products/b">B</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

<script>
const btn = document.getElementById('b1'), panel = document.getElementById('p1');
btn.addEventListener('click', () => {
  const open = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!open));
  panel.hidden = open;
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
    btn.click(); btn.focus();
  }
});
</script>

Nota: Evita role="menu" para la navegación del sitio. Implica un menú de aplicación con comportamiento de flechas, lo cual confunde en la web.

4. Mega menús: “comprimir y entregar” información

4.1 Principios de diseño

• Usa encabezados de columna con texto visible (equivalente a h3); los íconos son complementarios.
• Limita a ~3 columnas, con 5–7 enlaces por columna. Resiste “mostrar todo” para legibilidad.
• Por defecto clic para abrir/cerrar (más fiable en móvil y teclado que el hover).

4.2 Esqueleto mínimo de implementación

<li class="mega">
  <button aria-expanded="false" aria-controls="mega-products" id="megaBtn">Productos</button>
  <div id="mega-products" role="region" aria-labelledby="megaBtn" hidden>
    <div class="col">
      <h3>Primeros pasos</h3>
      <ul>
        <li><a href="/getting-started">Guía de onboarding</a></li>
        <li><a href="/tutorials">Tutoriales</a></li>
      </ul>
    </div>
    <div class="col">
      <h3>Líneas de producto</h3>
      <ul>
        <li><a href="/products/a">A</a></li>
        <li><a href="/products/b">B</a></li>
      </ul>
    </div>
    <div class="col">
      <h3>Soporte</h3>
      <ul>
        <li><a href="/docs">Documentación</a></li>
        <li><a href="/contact">Contacto</a></li>
      </ul>
    </div>
  </div>
</li>

.mega [role="region"] { display:grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)); gap:1rem; }
.mega [role="region"][hidden] { display:none; }
.mega h3 { font-size:1rem; margin:.5rem 0; }

5. Breadcrumbs: una “ruta corta” a la ubicación actual

• Usa <ol> dentro de nav[aria-label="Breadcrumbs"] para indicar jerarquía/orden.
• El elemento final lleva aria-current="page" y no necesita ser enlace.

<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/products">Productos</a></li>
    <li aria-current="page">Detalles de A</li>
  </ol>
</nav>

6. Buscador del sitio: formularios y resultados accesibles

6.1 Formulario de búsqueda

• Proporciona una etiqueta visible (el placeholder no es etiqueta).
• Usa type="search" + autocomplete="on", e incluye un botón de envío.
• Añade un enlace de salto a resultados en la página de resultados (“Saltar a los resultados”).

<form role="search" action="/search">
  <label for="q">Búsqueda en el sitio</label>
  <input id="q" name="q" type="search" autocomplete="on">
  <button>Buscar</button>
</form>

6.2 Lista de resultados

• Muestra el conteo de resultados cerca de un encabezado (p. ej., “125 resultados encontrados”).
• Para resaltar, no te bases solo en el color—usa también negrita/subrayado.
• Paginación como nav[aria-label="Paginación"]; la página actual recibe aria-current="page".

<nav aria-label="Paginación">
  <ul>
    <li><a href="?page=1">1</a></li>
    <li><a aria-current="page">2</a></li>
    <li><a href="?page=3">3</a></li>
  </ul>
</nav>

7. Índice en página (TOC) y saltos de sección

• Para páginas largas, coloca un TOC arriba (<nav aria-label="Índice en página">).
• Da a cada encabezado un ID, y al saltar usa scroll suave + mover el foco para evitar desorientación.

<nav aria-label="Índice en página">
  <ol>
    <li><a href="#sec-1">1. Introducción</a></li>
    <li><a href="#sec-2">2. Principios de diseño</a></li>
  </ol>
</nav>

<h2 id="sec-1" tabindex="-1">Introducción</h2>

:target { scroll-margin-top: 6rem; } /* Compensa encabezados fijos */

8. Footer y mapa del sitio: la red de seguridad final

• El pie debe incluir un resumen de categorías principales más contacto y política de accesibilidad.
• El mapa del sitio como nav[aria-label="Mapa del sitio"], idealmente limitado a ~2 niveles para controlar la densidad visual.

9. Navegación móvil: toque, zoom, responsive

• Tamaño de objetivo 44–48 px, con espaciado adecuado entre objetivos.
• No uses user-scalable=no; permite zoom.
• Los toggles del drawer usan <button aria-expanded> con etiquetas como “Abrir menú / Cerrar menú.”
• Evita forzar la orientación.
• Convierte los mega menús en acordeones, abriendo un nivel por vez para reducir carga.

10. Contraste, foco, estado: haz visible también lo no textual

• Apunta a 4.5:1 para texto, 3:1 para elementos no textuales (íconos, contornos).
• Haz que los indicadores de foco sean inconfundibles: grosor + color + offset.
• Indica la ubicación actual con color + subrayado + aria-current.

a[aria-current="page"] { font-weight:700; text-decoration:underline; }
:focus-visible { outline:3px solid #FF9900; outline-offset:3px; }

11. Diseñar páginas “perdidas”: 404 / mantenimiento / cero resultados

• 404:
  • Usa un tono cordial para explicar qué ocurrió y qué hacer después (buscar, inicio, páginas populares).
  • Para lectores de pantalla, incluye un <h1>Página no encontrada</h1> claro.
• Mantenimiento:
  • Proporciona hora estimada de retorno, alcance del impacto y contactos de emergencia en texto.
• Cero resultados:
  • Ofrece alternativas (ortografía, términos relacionados, búsquedas populares) y una vía de navegación por categorías.

12. Patrones “no lo hagas” y arreglos

13. Plantilla: header & nav mínimos (para copiar/pegar)

<header class="site-header">
  <a class="logo" href="/">Marca</a>
  <button id="menuBtn" aria-expanded="false" aria-controls="gNav">Menú</button>
  <nav id="gNav" aria-label="Global" hidden>
    <ul>
      <li><a href="/" aria-current="page">Inicio</a></li>
      <li><a href="/products">Productos</a></li>
      <li><a href="/pricing">Precios</a></li>
      <li><a href="/docs">Documentación</a></li>
    </ul>
  </nav>
  <form role="search" action="/search" class="search">
    <label for="q" class="sr-only">Búsqueda en el sitio</label>
    <input id="q" name="q" type="search" placeholder="Introduce palabras clave">
    <button>Buscar</button>
  </form>
</header>

<script>
const b = document.getElementById('menuBtn'), nav = document.getElementById('gNav');
b.addEventListener('click', () => {
  const open = b.getAttribute('aria-expanded') === 'true';
  b.setAttribute('aria-expanded', String(!open));
  nav.hidden = open;
  if (!open) nav.querySelector('a')?.focus();
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && b.getAttribute('aria-expanded') === 'true') { b.click(); b.focus(); }
});
</script>

.sr-only{ position:absolute; left:-9999px; }
.site-header{ display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; }
#gNav ul{ display:flex; gap:1rem; list-style:none; padding:0; margin:0; }
@media (max-width:48rem){
  #gNav[hidden]{ display:none; }
  #gNav ul{ display:grid; gap:.5rem; }
}
:focus-visible{ outline:3px solid #FF9900; outline-offset:2px; }

14. IA por tipo de página: Home / Listado / Detalle / Formulario

• Home: Limita las rutas primarias a 3–5; muestra la ruta más corta para recién llegados.
• Listado (búsqueda/categoría): Ordena como conteo de resultados → controles de refinado → lista. Proporciona botones etiquetados para ordenar/filtrar.
• Detalle: Combina índice en página, enlaces relacionados (anterior/siguiente / categoría padre) y breadcrumbs.
• Formulario: Minimiza la navegación global (o añade una ruta “Salir del formulario”) para reducir distracciones.

15. Prueba manual (smoke test de 5 minutos)

1. Solo con Tab, puedes alcanzar enlace de salto → main → enlaces primarios → footer en orden lógico.
2. En un lector de pantalla, las listas de landmarks y encabezados tienen sentido.
3. La ubicación actual se comunica más allá del color (subrayado/negrita/aria-current).
4. Desplegables/mega menús conmutan con un botón y cierran con Esc, devolviendo el foco.
5. Tras los saltos del índice en página, los encabezados no quedan ocultos y la lectura puede comenzar de inmediato.
6. En móvil, el tamaño/espaciado de objetivos es suficiente; los headers fijos no cubren el contenido.

16. Práctica organizativa: pon las “reglas del mapa” en tu sistema de diseño

• Especificaciones de componentes:
  • Nombre/Rol/Valor (NRV): documenta aria-expanded, aria-current, etc.
  • Interacciones clave: Tab / Esc / comportamiento con flechas.
  • Contraste: ratios mínimos para enlaces, foco, íconos.
• Guías de contenido:
  • El texto de enlace debe indicar el objeto/acción (“Haz clic aquí” no se permite).
  • Nomenclatura coherente para breadcrumbs y títulos.
• Incorpora una lista operativa en las PR; estandariza checks automatizados en CI + prueba manual de 5 minutos.

17. Caso práctico: reducir un mega menú para disminuir la “fatiga de decisión”

Antes

• 5 columnas × 10 enlaces = 50 enlaces. Expansión instantánea por hover; imposible en móvil.
• Ubicación actual indicada solo por color; ilegible para lectores de pantalla.
• Sin alternativas ante búsqueda sin resultados.

Después

• Reducido a 3 columnas × 6 enlaces = 18 enlaces; los 3 principales se promocionan como “Recomendados.”
• Apertura/cierre por botón con aria-expanded y soporte Esc.
• Ubicación actual unificada: aria-current + negrita + subrayado.
• En cero resultados, mostrar palabras sugeridas y enlaces por categoría.
• Resultado: −23% en tiempo-a-tarea por sesión; −41% en toques erróneos en móvil.

18. Checklist (para pegar, definición de hecho)

• [ ] header/nav/main/aside/footer correctos; múltiples nav con aria-label
• [ ] Estructura lógica de encabezados (un h1)
• [ ] Enlace de salto aparece en el primer Tab y mueve el foco a main
• [ ] La nav global usa HTML nativo + ARIA mínima; los desplegables conmutan con botón
• [ ] Ubicación actual con aria-current + señales visuales (negrita/subrayado)
• [ ] El formulario de búsqueda tiene etiqueta visible; conteo de resultados & paginación accesibles
• [ ] Tras el salto del TOC, los encabezados no quedan ocultos (scroll-margin-top)
• [ ] Móvil: objetivos 44–48 px, zoom permitido, sin scroll horizontal forzado
• [ ] Cero/404/mantenimiento ofrecen alternativas y tono cordial
• [ ] Pasa la prueba rápida de 5 minutos (§15)

19. Beneficios concretos por rol

• Diseñadores UI/UX: Principios claros de IA y patrones de nav permiten flujos seguros y despejados.
• Ingenieros Frontend: Plantillas de nativo + ARIA mínima producen código resistente a regresiones.
• Arquitectos de información / Editores: Nombres consistentes para títulos, breadcrumbs y enlaces mejoran encontrabilidad y reutilización.
• PMs / Directores: Criterios AA de aceptación explícitos, facilitando decisiones de release.
• QA / Especialistas A11y: Oráculos estables para landmarks, encabezados, enlaces de salto, ubicación actual.
• Usuarios (AT, teclado, móvil): Alcanzan objetivos por la ruta más corta con menos confusión y fatiga.

20. Cierre: ruta más corta, UX más amable, entendimiento compartido

1. Establece el mapa con landmarks, encabezados y enlaces de salto.
2. Mantén la nav robusta con HTML nativo + ARIA mínima.
3. No dependas solo del color—señales redundantes evitan la pérdida.
4. Conserva buscador, breadcrumbs e índice en página como rutas alternativas.
5. Diseña mobile-first con tamaño de objetivo, zoom y toggles cuidadosos.
6. Provee rescates para páginas perdidas (404 / cero resultados / mantenimiento) con tono cordial.
7. Mantén la calidad con pruebas repetibles (smoke de 5 min) y una lista de verificación.

La navegación es una guía silenciosa que acompaña a tus usuarios. Que tu sitio sea un lugar donde todos lleguen sin perderse, sin esfuerzo extra y con el mismo entendimiento.