Navegación y orientación: títulos, encabezados, saltos y múltiples vías (2.4.1, 2.4.2, 2.4.5, 2.4.6)

En la lección anterior vimos que una interfaz coherente permite construir un modelo mental del sitio. Pero la coherencia no basta si la persona no sabe en qué página está, no encuentra la que busca o tiene que atravesar cuarenta enlaces de menú antes de llegar al contenido. Esta lección trata la orientación: títulos, encabezados, mecanismos para saltar bloques, distintas vías para llegar a una página y señalización de los procesos de varios pasos. Casi todo se decide en diseño y arquitectura de la información, mucho antes del código.

Tres preguntas que toda pantalla debe responder

Una forma práctica de revisar la orientación es comprobar que cada pantalla responde, sin esfuerzo y sin depender de la vista, a tres preguntas:

• ¿Dónde estoy? Lo responden el título de la página (2.4.2), el encabezado principal, la sección actual marcada en el menú y, si existen, las migas de pan.
• ¿Qué puedo hacer aquí? Lo responden los encabezados que describen cada bloque (2.4.6), las etiquetas de los controles y una acción principal clara.
• ¿Cómo llego a donde quiero? Lo responden el menú, el buscador, el mapa web, los enlaces relacionados (2.4.5) y el enlace para saltar al contenido (2.4.1).

Quien usa lector de pantalla obtiene estas respuestas de forma secuencial (título, encabezados, regiones); quien tiene una discapacidad cognitiva las necesita visibles y estables; quien navega con teclado necesita que el camino hasta el contenido sea corto.

Infografía · Conceptos clave

Siete piezas para que nadie se pierda en una web

Responden a «¿dónde estoy?», «¿qué puedo hacer?» y «¿cómo llego?» sin depender de la vista

• Título de páginaLo específico primero; es lo primero que anuncia el lector (2.4.2)
• Encabezados descriptivosLeídos solos, cuentan de qué va la página (2.4.6)
• Ubicación señaladaSección actual y migas de pan, sin depender solo del color
• Varias víasMenú, buscador, mapa web o enlaces relacionados (2.4.5)
• Buscador que orientaBúsqueda y número de resultados; sugerencias si no hay ninguno
• Saltar al contenidoEnlace de salto que aparece al recibir el foco (2.4.1)
• Pasos en texto«Paso 2 de 4: Datos personales» en el título y en pantalla

Leer la infografía como texto

Siete tarjetas con las piezas de diseño que orientan a la persona usuaria. Título de página: lo específico primero; es lo primero que anuncia el lector de pantalla (2.4.2). Encabezados descriptivos: leídos solos, cuentan de qué va la página (2.4.6). Ubicación señalada: la sección actual y las migas de pan se marcan sin depender solo del color. Varias vías: menú, buscador, mapa web o enlaces relacionados (2.4.5). Buscador que orienta: resultados con la búsqueda y su número, y sugerencias cuando no hay resultados. Saltar al contenido: enlace de salto que aparece al recibir el foco (2.4.1). Pasos en texto: «Paso 2 de 4: Datos personales» en el título y en pantalla.

¿Dónde estoy? Títulos de página y encabezados

2.4.2 Titulado de páginas (A)

Cada página debe tener un título que describa su tema o propósito. Es lo primero que anuncia el lector de pantalla al cargarla y el texto de la pestaña, del historial y de los marcadores. Se implementa en <title>, pero el patrón lo definen diseño y contenido, porque debe ser coherente en todo el sitio. Un patrón que funciona: lo específico primero, lo general después.

• «Solicitar cita previa – Padrón municipal – Ayuntamiento de Villaclara».
• En un proceso: «Paso 2 de 4: Datos personales – Ayuda al alquiler».
• Tras un error de envío: «Error: revisa 2 campos – Paso 2 de 4: Datos personales…».

Si el nombre del sitio va delante, la persona escucha siempre lo mismo antes de lo que importa y, con muchas pestañas abiertas, todas parecen iguales.

2.4.6 Encabezados y etiquetas (AA)

Los encabezados y las etiquetas deben describir el tema o el propósito del bloque. «Más información», «Otros» o «Destacados» no dicen nada fuera de contexto; «Requisitos para empadronarse» o «Plazos y tasas» sí. Muchas personas que usan lector de pantalla recorren la página solo por sus encabezados: si esa lista, leída sola, no cuenta de qué va la página, el diseño no está terminado. El nivel (H1, H2, H3) depende de la estructura, no del tamaño de letra, como vimos en la lección sobre layout y coherencia.

Señalar la ubicación actual

La sección actual del menú debe distinguirse con algo más que el color (1.4.1 Uso del color): subrayado, barra lateral o negrita. En la anotación indica que ese enlace llevará aria-current="page", para que el lector diga «página actual». Las migas de pan (la ruta «Inicio › Trámites › Padrón › Cita previa») ayudan en sitios profundos; 2.4.8 Ubicación (AAA) las recoge como una forma de indicar dónde está la persona dentro del conjunto de páginas.

¿Cómo llego? Varias vías y un buscador que funcione

2.4.5 Múltiples vías (AA)

Debe haber 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 confirmación de un pago o el paso 3 de un formulario no la necesitan). Vías habituales: menú, buscador, mapa web, índice de la A a la Z, tabla de contenidos o enlaces relacionados. Cada vía sirve a personas distintas: quien tiene dificultades de memoria suele preferir buscar, y quien no conoce la jerga de la organización no encontrará «Padrón» en el menú si lo busca como «empadronarme».

Diseñar el buscador

• Nombre claro y coherente: «Buscar en la web»; si solo hay una lupa, su nombre accesible es «Buscar» en todo el sitio (3.2.4).
• Resultados que orientan: un encabezado con la búsqueda y el número de resultados («12 resultados para "empadronamiento"») y cada resultado con título enlazado y extracto.
• Estado sin resultados: sugerencias, corrección ortográfica y enlaces a los trámites más solicitados, nunca una página vacía.
• Sugerencias al escribir, solo como complemento: el botón «Buscar» debe funcionar sin ellas.

Menús que se despliegan

• El panel se abre con un botón (clic, toque, Intro o Espacio), no solo al pasar el ratón. Si además se abre con hover, debe cumplir 1.4.13, que veremos en la lección siguiente.
• Si el elemento padre es también un enlace («Trámites»), separa el enlace del botón que despliega, o haz que el padre solo despliegue e incluye «Ver todos los trámites» dentro del panel.
• El estado abierto o cerrado se ve (flecha que gira) y se anota para desarrollo.
• Para la navegación de un sitio, el patrón adecuado del APG (se abre en una ventana nueva) es la navegación desplegable (disclosure), no el menú de aplicación (role="menu"), que impone una interacción con flechas propia de los programas de escritorio.

<!-- Incorrecto: un div que se abre al pasar el ratón -->
<div class="menu" onmouseover="abrir()">Trámites</div>

<!-- Correcto: navegación con nombre y botón que indica su estado -->
<nav aria-label="Principal">
  <button type="button" aria-expanded="false" aria-controls="sub-tramites">Trámites</button>
  <ul id="sub-tramites" hidden>
    <li><a href="/tramites/padron">Padrón municipal</a></li>
    <li><a href="/tramites">Ver todos los trámites</a></li>
  </ul>
</nav>

Saltar lo que no necesito: 2.4.1 Evitar bloques (A)

Debe existir un mecanismo para saltar los bloques que se repiten en varias páginas: cabecera, menú, buscador, avisos. Los landmarks y los encabezados ayudan a quien usa lector de pantalla, que puede saltar por regiones. Pero quien navega solo con teclado no dispone de esos atajos: necesita un skip link, un enlace «Saltar al contenido principal» que es el primer elemento que recibe el foco y lleva al inicio del contenido. Diséñalo como un componente más (posición, tamaño, contraste y estado de foco): puede estar oculto hasta recibir el foco, pero entonces debe aparecer con claridad. En páginas largas añade saltos internos («Saltar a los resultados» en un buscador con veinte filtros) e indica en la anotación el destino de cada salto.

Orientarse en procesos y listas largas

Una solicitud, una compra o una reserva necesitan un indicador de progreso en texto («Paso 2 de 4: Datos personales»), con el nombre de cada paso y no solo círculos de colores. El título y el H1 cambian en cada paso, volver atrás conserva los datos y la pantalla de revisión enlaza a cada paso, como verás para 3.3.4 en la lección de formularios.

El desplazamiento infinito, que añade resultados automáticamente al llegar al final, hace inalcanzable el pie de página (contacto, ayuda, enlaces legales) y hace perder la posición a quien usa teclado o lector de pantalla. En listados donde se busca algo concreto, prefiere la paginación (con la página actual marcada y números de al menos 24 por 24 px, como verás en la lección sobre el tamaño del objetivo) o un botón «Cargar más resultados», y especifica qué ocurre al pulsarlo: el foco va al primer resultado nuevo y se anuncia «Mostrando 20 de 85 resultados».

Resumen

• Cada pantalla debe responder a «¿dónde estoy?», «¿qué puedo hacer?» y «¿cómo llego?» sin depender de la vista.
• 2.4.2 Titulado de páginas (A) y 2.4.6 Encabezados y etiquetas (AA): títulos con lo específico primero y encabezados que describen su bloque.
• 2.4.5 Múltiples vías (AA): menú, buscador, mapa web o enlaces relacionados; no se exige en los pasos de un proceso.
• 2.4.1 Evitar bloques (A): «Saltar al contenido principal» visible al recibir el foco, y saltos internos en páginas largas.
• Menús que se despliegan con un botón, procesos con «Paso X de Y» en texto y paginación o «Cargar más» en lugar de desplazamiento infinito.