Orientación en el sitio: migas de pan, paginación, buscador y mapa web

Una página bien estructurada responde a la pregunta «¿qué hay aquí?». Pero la persona también necesita saber dónde está dentro del sitio, cómo ha llegado y cómo llegar a otra parte. Quien ve la pantalla lo deduce del menú resaltado, de la ruta que aparece sobre el título o del número de página marcado en un listado. Quien usa un lector de pantalla, un magnificador que solo muestra una parte de la pantalla o tiene dificultades de memoria u orientación depende de que esos mecanismos estén marcados y sean coherentes. Esta lección trata del marcado de las migas de pan, la paginación, el mapa web y el buscador, y de los criterios que los piden: 2.4.5 Múltiples vías (AA), 2.4.8 Ubicación (AAA), 3.2.3 Navegación coherente (AA) y 3.2.6 Ayuda coherente (A).

Más de un camino: 2.4.5 Múltiples vías

El criterio exige que haya más de una forma de localizar una página dentro de un conjunto de páginas, salvo que la página sea el resultado o un paso de un proceso (la pantalla 3 de un formulario de matrícula no tiene por qué ser localizable por sí sola). El menú cuenta como una vía; hace falta al menos otra. Las más habituales son:

• Un buscador interno.
• Un mapa web en HTML que enlace todas las páginas o secciones.
• Una tabla de contenidos o un índice de la sección.
• Enlaces entre páginas relacionadas (trámites relacionados, artículos de la misma serie).

En un sitio de cinco páginas, las dos vías pueden ser muy sencillas: por ejemplo, enlazar todas las páginas desde la portada y ofrecer además una lista de enlaces a todas ellas o un mapa web. En una sede electrónica con cientos de trámites, el buscador y el catálogo navegable son imprescindibles para cualquier persona. Ojo: el fichero sitemap.xml está pensado para los motores de búsqueda y no cuenta, porque nadie lo usa para navegar.

Migas de pan: dónde estoy

Las migas de pan (breadcrumbs) muestran la ruta jerárquica desde la portada hasta la página actual. Son una de las técnicas para 2.4.8 Ubicación, que es AAA, pero resultan tan útiles y tan baratas que conviene tenerlas en cualquier sitio con más de dos niveles. El patrón de las prácticas de autoría de ARIA (APG (se abre en una ventana nueva)) del W3C es este:

<nav aria-label="Migas de pan">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/tramites/">Catálogo de trámites</a></li>
    <li><a href="/tramites/padron/">Padrón</a></li>
    <li><a href="/tramites/padron/certificado/" aria-current="page">Certificado de empadronamiento</a></li>
  </ol>
</nav>

Cada pieza tiene su razón de ser. El <nav> con nombre lo convierte en un landmark que se distingue del menú principal. La lista ordenada comunica que hay cuatro niveles y en qué orden. Y aria-current="page" hace que el lector anuncie «página actual» en el último elemento. Algunos sitios dejan ese último elemento como texto sin enlace; también es aceptable, siempre que siga dentro de la lista.

<div class="migas">
  <a href="/">Inicio</a> > <a href="/tramites/">Trámites</a> > Padrón
</div>

La página actual en los menús

El mismo aria-current="page" sirve en el menú principal y en los menús laterales: indica qué enlace corresponde a la página en la que estás. Para quien ve la pantalla, la indicación visual no puede depender solo del color (lo viste con 1.4.1 Uso del color): un subrayado, un borde o un fondo con forma clara funcionan mejor. Un buen truco es usar el propio atributo como selector de estilo, [aria-current="page"], para que la indicación visual y la semántica no se desincronicen nunca.

aria-current admite otros valores (step para el paso actual de un proceso, date para la fecha actual en un calendario, location, time, true). Úsalos solo con ese sentido: en un indicador de pasos de un trámite, el paso en curso lleva aria-current="step", no "page".

Paginación y listados largos

Los listados de noticias, resultados o productos se dividen en páginas. La paginación es otra navegación y se marca como tal:

<nav aria-label="Paginación">
  <ul>
    <li><a href="?p=1">Anterior</a></li>
    <li><a href="?p=1" aria-label="Página 1">1</a></li>
    <li><a href="?p=2" aria-label="Página 2" aria-current="page">2</a></li>
    <li><a href="?p=3" aria-label="Página 3">3</a></li>
    <li><a href="?p=3">Siguiente</a></li>
  </ul>
</nav>

Los nombres «Página 2» contienen el número visible, así que respetan 2.5.3 Etiqueta en el nombre, y son mucho más claros en la lista de enlaces que un «2» suelto. Completa el patrón con el título de la página: «Noticias, página 2 de 8 - Ayuntamiento de Ejemplo», para que cada página del listado sea distinguible en pestañas e historial (lo verás en la lección siguiente). En la primera página, no muestres un «Anterior» que no lleva a ningún sitio o, si el diseño lo exige, que no sea un enlace.

Buscador y mapa web

El buscador es la vía alternativa más usada. Su marcado es corto: el elemento <search> (o role="search" en navegadores antiguos), una etiqueta visible y un botón con nombre.

<search>
  <form action="/buscar">
    <label for="q">Buscar en la web</label>
    <input id="q" name="q" type="search">
    <button>Buscar</button>
  </form>
</search>

La página de resultados también es una página: su título debe decir qué se buscó y cuántos resultados hay, su <h1> repetirlo, y los resultados formar una lista de tarjetas como las de la lección de patrones. Si no hay resultados, dilo con texto claro y ofrece alternativas.

El mapa web en HTML refleja la jerarquía del sitio con listas anidadas: cada sección es un <li> que contiene un enlace y, dentro, otra <ul> con sus páginas. Así el lector anuncia el nivel de anidamiento y la persona entiende la estructura sin verla.

Coherencia entre páginas

Los mecanismos de orientación solo orientan si están siempre en el mismo sitio. 3.2.3 Navegación coherente pide que la navegación repetida aparezca en el mismo orden relativo en todas las páginas, y 3.2.4 Identificación coherente, que los componentes con la misma función se identifiquen igual; ya los viste desde el diseño en el nivel 2. WCAG 2.2 añadió 3.2.6 Ayuda coherente: si el sitio ofrece ayuda en varias páginas (teléfono, formulario de contacto, chat, preguntas frecuentes), debe aparecer en el mismo orden relativo respecto al resto del contenido. En el marcado, la forma más segura de cumplir los tres es generar cabecera, menús, migas y pie desde los mismos componentes de plantilla.

Resumen

• 2.4.5 exige al menos dos vías para llegar a cada página (menú más buscador, mapa web o índice), salvo los pasos de un proceso.
• Las migas de pan son un nav con nombre, con una lista ordenada y aria-current="page" en la página actual; los separadores, fuera del texto.
• aria-current marca la página actual en menús y paginación, y step el paso actual de un proceso.
• La paginación es otra navegación con nombre; evita el desplazamiento infinito o ofrece un botón «Cargar más».
• Cabecera, menús, migas, ayuda y pie deben salir de los mismos componentes para cumplir 3.2.3, 3.2.4 y 3.2.6.