Procesos en varios pasos: progreso, tiempo límite (2.2.1) y cambios de contexto (3.2.2)

Pedir cita previa, solicitar una ayuda en la sede electrónica de un ayuntamiento, abrir una cuenta en un banco o completar una compra: casi ningún trámite cabe en una sola pantalla. Cuando el formulario se reparte en varios pasos aparecen barreras nuevas que no dependen de ningún campo concreto: no saber en qué paso estás, perder el foco al avanzar, quedarte sin sesión a mitad del trámite, que la página cambie sola al elegir una opción, no encontrar la ayuda o enviar sin poder revisar. Esta lección reúne las técnicas para que el proceso completo, y no solo cada campo, sea accesible. Retoma la entrada redundante (3.3.7) y la prevención de errores (3.3.4) de lecciones anteriores y añade 2.2.1 Tiempo ajustable, 3.2.2 Al recibir entradas y 3.2.6 Ayuda coherente.

Saber dónde estás: el indicador de pasos

Un indicador de progreso hecho con círculos de colores no dice nada a quien no lo ve. El progreso debe estar en texto y en la estructura:

• Un encabezado en cada paso que diga dónde estás: «Paso 2 de 4: Datos del solicitante».
• El mismo dato en el <title>, que es lo primero que anuncia el lector al cargar la página (2.4.2 Titulado de páginas).
• Si hay una lista de pasos, una lista ordenada con el paso actual marcado con aria-current="step" y los completados indicados en texto, no solo con un tic.

<title>Paso 2 de 4: Datos del solicitante – Solicitud de ayuda escolar</title>
…
<nav aria-label="Progreso de la solicitud">
  <ol>
    <li>Requisitos <span class="visualmente-oculto">(completado)</span></li>
    <li aria-current="step">Datos del solicitante</li>
    <li>Documentación</li>
    <li>Revisión y envío</li>
  </ol>
</nav>
<h1 tabindex="-1" id="titulo-paso">Paso 2 de 4: Datos del solicitante</h1>

Al cambiar de paso: foco, título y botón Atrás

Si cada paso es una página nueva, el navegador reinicia el foco al principio y el lector anuncia el título: basta con que título y encabezado sean claros. Si el formulario es una aplicación de una sola página (SPA) que sustituye el contenido sin recargar, nada de eso ocurre solo. Tras pulsar «Continuar», el foco se queda en un botón que ya no existe y la persona no sabe que ha avanzado. Al cambiar de paso:

1. Actualiza el <title>.
2. Mueve el foco al encabezado del nuevo paso (con tabindex="-1", como en el ejemplo), para que se anuncie.
3. Si el paso no se ha podido validar, no avances: aplica el resumen de errores de la lección de validación.

El botón Atrás del navegador debe funcionar y devolver al paso anterior con los datos intactos; si no, se rompe también 3.3.7 Entrada redundante. Ofrece además un botón «Anterior» propio. La gestión del foco en SPA se trata a fondo en los cursos N3-C3 y N3-C6.

Tiempo límite: 2.2.1 Tiempo ajustable

Muchas sedes electrónicas y bancos cierran la sesión tras unos minutos de inactividad. Para una persona que usa un lector de pantalla, un pulsador o un teclado en pantalla, o que necesita buscar un documento en casa, quince minutos pueden ser muy pocos. El criterio 2.2.1 (A) exige que, si hay un límite de tiempo, se cumpla al menos una de estas condiciones:

• Desactivar: la persona puede quitar el límite antes de encontrarlo.
• Ajustar: puede ampliarlo antes de encontrarlo, al menos hasta diez veces su duración por defecto.
• Ampliar: se le avisa antes de que expire, tiene al menos 20 segundos para ampliarlo con una acción sencilla (por ejemplo, pulsar un botón) y puede hacerlo al menos diez veces.

Las excepciones son los límites en tiempo real (una subasta), los esenciales (un examen cronometrado, donde ampliar invalidaría la actividad) y los de más de 20 horas. La opción «Ampliar» es la más común en la práctica:

<div role="alertdialog" aria-modal="true"
     aria-labelledby="aviso-titulo" aria-describedby="aviso-texto">
  <h2 id="aviso-titulo">Tu sesión va a caducar</h2>
  <p id="aviso-texto">Por seguridad, la sesión se cerrará en 2 minutos.
     Los datos introducidos se guardarán como borrador.</p>
  <button type="button">Seguir con la solicitud</button>
  <button type="button">Cerrar sesión ahora</button>
</div>

El diálogo recibe el foco al abrirse (en el botón «Seguir con la solicitud») y lo devuelve al campo en el que estaba la persona al cerrarse. Dos criterios AAA completan el cuadro y son buena práctica en trámites largos: 2.2.5 pide que, si la sesión caduca, la persona pueda volver a autenticarse y continuar sin perder datos, y 2.2.6 pide avisar de cuánto tiempo de inactividad provoca la pérdida de datos, salvo que se conserven más de 20 horas. Guardar borradores automáticamente ayuda a cumplir ambos.

Sin sorpresas: 3.2.2 Al recibir entradas

El criterio 3.2.2 (A) prohíbe que cambiar el valor de un control provoque automáticamente un cambio de contexto (abrir otra página, enviar el formulario, mover el foco a otro sitio, abrir una ventana) salvo que se haya avisado antes. Casos típicos que lo incumplen:

• Un desplegable «Tipo de trámite» que carga otra página en cuanto se elige una opción. Quien navega con flechas por el <select> sale de la página al pasar por la primera opción.
• Un botón de opción que envía el formulario al marcarse.
• Un formulario que se envía solo al rellenar el último campo.
• Campos que saltan solos al siguiente al llenarse (el código de 6 dígitos repartido en 6 casillas): si no se avisa, puede considerarse un cambio de contexto y, en cualquier caso, desorienta a quien corrige un dígito.

La solución es un botón explícito («Continuar», «Aplicar filtro») o, si el comportamiento automático es imprescindible, avisar antes en texto. Mostrar u ocultar campos según una respuesta («¿Actúas en representación de otra persona? Sí / No») no es un cambio de contexto, sino un cambio de contenido: es aceptable si los campos nuevos aparecen justo después del control en el orden del DOM, si no se mueve el foco y si no se borran en silencio datos ya escritos.

<select id="tramite" onchange="location.href = this.value">…</select>

<form action="/tramites" method="get">
  <label for="tramite">Tipo de trámite</label>
  <select id="tramite" name="tramite">…</select>
  <button type="submit">Continuar</button>
</form>

La ayuda, siempre en el mismo sitio: 3.2.6

El criterio 3.2.6 Ayuda coherente (A), nuevo en WCAG 2.2, dice que si un conjunto de páginas ofrece un mecanismo de ayuda (teléfono o correo de contacto, chat, enlace a preguntas frecuentes) y se repite en varias páginas, debe aparecer en el mismo orden relativo respecto al resto del contenido. En un proceso de varios pasos esto significa que el enlace «¿Necesitas ayuda? 010» no puede estar en la cabecera en el paso 1 y en el pie en el paso 3. El criterio no obliga a ofrecer ayuda, pero un trámite largo sin ninguna es mala idea.

Revisar, confirmar y llevarse el justificante

Como vimos en la lección de validación, 3.3.4 Prevención de errores exige, en trámites con consecuencias legales o económicas, poder revisar y corregir antes de confirmar (o anular después, o que se compruebe la información). La pantalla de revisión debe:

• Mostrar los datos agrupados con encabezados por paso o en una lista de descripción (<dl>).
• Ofrecer enlaces «Cambiar» que digan qué cambian. Si el diseño solo muestra «Cambiar», completa el texto para el lector con texto visualmente oculto: <a href="/paso-2#dir">Cambiar <span class="visualmente-oculto">dirección</span></a> (2.4.4 Propósito de los enlaces (en contexto)).
• Volver a la pantalla de revisión tras corregir, no al principio del proceso.

La página de confirmación final necesita un encabezado claro («Solicitud presentada»), el número de registro en texto seleccionable y copiable, y un justificante descargable que sea a su vez accesible (los PDF accesibles se tratan en el curso N6-C1).

Resumen

• Indica el paso en el encabezado y en el <title>, y marca el paso actual con aria-current="step".
• En una SPA, al cambiar de paso actualiza el título y mueve el foco al encabezado; el botón Atrás debe conservar los datos.
• Si hay límite de tiempo, permite desactivarlo, ajustarlo o ampliarlo con aviso de al menos 20 segundos (2.2.1).
• Cambiar un valor no debe enviar, navegar ni mover el foco sin aviso (3.2.2); usa un botón «Continuar».
• Mantén la ayuda en el mismo orden en todos los pasos (3.2.6) y ofrece revisión antes de enviar (3.3.4).