Processos en diversos passos: progrés, temps límit (2.2.1) i canvis de context (3.2.2)

Demanar cita prèvia, sol·licitar una ajuda a la seu electrònica d'un ajuntament, obrir un compte en un banc o completar una compra: gairebé cap tràmit no cap en una sola pantalla. Quan el formulari es reparteix en diversos passos apareixen barreres noves que no depenen de cap camp concret: no saber en quin pas ets, perdre el focus en avançar, quedar-te sense sessió a mig tràmit, que la pàgina canviï sola en triar una opció, no trobar l'ajuda o enviar sense poder revisar. Aquesta lliçó reuneix les tècniques perquè el procés complet, i no només cada camp, sigui accessible. Reprèn l'entrada redundant (3.3.7) i la prevenció d'errors (3.3.4) de lliçons anteriors i hi afegeix el 2.2.1 Temps ajustable, el 3.2.2 En introduir dades i el 3.2.6 Ajuda coherent.

Saber on ets: l'indicador de passos

Un indicador de progrés fet amb cercles de colors no diu res a qui no el veu. El progrés ha de ser en text i en l'estructura:

• Un encapçalament a cada pas que digui on ets: «Pas 2 de 4: Dades del sol·licitant».
• La mateixa dada al <title>, que és el primer que anuncia el lector en carregar la pàgina (2.4.2 Pàgina titulada).
• Si hi ha una llista de passos, una llista ordenada amb el pas actual marcat amb aria-current="step" i els completats indicats en text, no només amb una marca.

<title>Pas 2 de 4: Dades del sol·licitant – Sol·licitud d'ajuda escolar</title>
…
<nav aria-label="Progrés de la sol·licitud">
  <ol>
    <li>Requisits <span class="visualmente-oculto">(completat)</span></li>
    <li aria-current="step">Dades del sol·licitant</li>
    <li>Documentació</li>
    <li>Revisió i enviament</li>
  </ol>
</nav>
<h1 tabindex="-1" id="titulo-paso">Pas 2 de 4: Dades del sol·licitant</h1>

En canviar de pas: focus, títol i botó Enrere

Si cada pas és una pàgina nova, el navegador reinicia el focus al principi i el lector anuncia el títol: n'hi ha prou que el títol i l'encapçalament siguin clars. Si el formulari és una aplicació d'una sola pàgina (SPA) que substitueix el contingut sense recarregar, res d'això no passa sol. Després de prémer «Continua», el focus es queda en un botó que ja no existeix i la persona no sap que ha avançat. En canviar de pas:

1. Actualitza el <title>.
2. Mou el focus a l'encapçalament del nou pas (amb tabindex="-1", com a l'exemple), perquè s'anunciï.
3. Si el pas no s'ha pogut validar, no avancis: aplica el resum d'errors de la lliçó de validació.

El botó Enrere del navegador ha de funcionar i tornar al pas anterior amb les dades intactes; si no, es trenca també el 3.3.7 Entrada redundant. Ofereix, a més, un botó «Anterior» propi. La gestió del focus en SPA es tracta a fons als cursos N3-C3 i N3-C6.

Temps límit: 2.2.1 Temps ajustable

Moltes seus electròniques i bancs tanquen la sessió després d'uns minuts d'inactivitat. Per a una persona que fa servir un lector de pantalla, un polsador o un teclat en pantalla, o que necessita buscar un document a casa, quinze minuts poden ser molt pocs. El criteri 2.2.1 (A) exigeix que, si hi ha un límit de temps, es compleixi almenys una d'aquestes condicions:

• Desactivar: la persona pot treure el límit abans de trobar-lo.
• Ajustar: el pot ampliar abans de trobar-lo, almenys fins a deu vegades la seva durada per defecte.
• Ampliar: se l'avisa abans que expiri, té almenys 20 segons per ampliar-lo amb una acció senzilla (per exemple, prémer un botó) i ho pot fer almenys deu vegades.

Les excepcions són els límits en temps real (una subhasta), els essencials (un examen cronometrat, on ampliar invalidaria l'activitat) i els de més de 20 hores. L'opció «Ampliar» és la més comuna a la pràctica:

<div role="alertdialog" aria-modal="true"
     aria-labelledby="aviso-titulo" aria-describedby="aviso-texto">
  <h2 id="aviso-titulo">La teva sessió caducarà</h2>
  <p id="aviso-texto">Per seguretat, la sessió es tancarà d'aquí a 2 minuts.
     Les dades introduïdes es desaran com a esborrany.</p>
  <button type="button">Continua amb la sol·licitud</button>
  <button type="button">Tanca la sessió ara</button>
</div>

El diàleg rep el focus en obrir-se (al botó «Continua amb la sol·licitud») i el retorna al camp on era la persona en tancar-se. Dos criteris AAA completen el quadre i són una bona pràctica en tràmits llargs: el 2.2.5 demana que, si la sessió caduca, la persona pugui tornar a autenticar-se i continuar sense perdre dades, i el 2.2.6 demana avisar de quant temps d'inactivitat provoca la pèrdua de dades, tret que es conservin més de 20 hores. Desar esborranys automàticament ajuda a complir-los tots dos.

Sense sorpreses: 3.2.2 En introduir dades

El criteri 3.2.2 (A) prohibeix que canviar el valor d'un control provoqui automàticament un canvi de context (obrir una altra pàgina, enviar el formulari, moure el focus a un altre lloc, obrir una finestra) tret que s'hagi avisat abans. Casos típics que l'incompleixen:

• Un desplegable «Tipus de tràmit» que carrega una altra pàgina tan bon punt es tria una opció. Qui navega amb fletxes pel <select> surt de la pàgina en passar per la primera opció.
• Un botó d'opció que envia el formulari en marcar-se.
• Un formulari que s'envia sol en emplenar l'últim camp.
• Camps que salten sols al següent quan s'omplen (el codi de 6 dígits repartit en 6 caselles): si no s'avisa, es pot considerar un canvi de context i, en qualsevol cas, desorienta qui corregeix un dígit.

La solució és un botó explícit («Continua», «Aplica el filtre») o, si el comportament automàtic és imprescindible, avisar abans en text. Mostrar o ocultar camps segons una resposta («Actues en representació d'una altra persona? Sí / No») no és un canvi de context, sinó un canvi de contingut: és acceptable si els camps nous apareixen just després del control en l'ordre del DOM, si no es mou el focus i si no s'esborren en silenci dades ja escrites.

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

<form action="/tramites" method="get">
  <label for="tramite">Tipus de tràmit</label>
  <select id="tramite" name="tramite">…</select>
  <button type="submit">Continua</button>
</form>

L'ajuda, sempre al mateix lloc: 3.2.6

El criteri 3.2.6 Ajuda coherent (A), nou a les WCAG 2.2, diu que si un conjunt de pàgines ofereix un mecanisme d'ajuda (telèfon o correu de contacte, xat, enllaç a preguntes freqüents) i es repeteix en diverses pàgines, ha d'aparèixer en el mateix ordre relatiu respecte a la resta del contingut. En un procés de diversos passos això vol dir que l'enllaç «Necessites ajuda? 010» no pot ser a la capçalera al pas 1 i al peu al pas 3. El criteri no obliga a oferir ajuda, però un tràmit llarg sense cap ajuda és mala idea.

Revisar, confirmar i endur-se el justificant

Com vam veure a la lliçó de validació, el 3.3.4 Prevenció d'errors exigeix, en tràmits amb conseqüències legals o econòmiques, poder revisar i corregir abans de confirmar (o anul·lar després, o que es comprovi la informació). La pantalla de revisió ha de:

• Mostrar les dades agrupades amb encapçalaments per pas o en una llista de descripció (<dl>).
• Oferir enllaços «Canvia» que diguin què canvien. Si el disseny només mostra «Canvia», completa el text per al lector amb text visualment ocult: <a href="/paso-2#dir">Canvia <span class="visualmente-oculto">l'adreça</span></a> (2.4.4 Propòsit dels enllaços (en context)).
• Tornar a la pantalla de revisió després de corregir, no al principi del procés.

La pàgina de confirmació final necessita un encapçalament clar («Sol·licitud presentada»), el número de registre en text seleccionable i copiable, i un justificant descarregable que sigui al seu torn accessible (els PDF accessibles es tracten al curs N6-C1).

Resum

• Indica el pas a l'encapçalament i al <title>, i marca el pas actual amb aria-current="step".
• En una SPA, en canviar de pas actualitza el títol i mou el focus a l'encapçalament; el botó Enrere ha de conservar les dades.
• Si hi ha límit de temps, permet desactivar-lo, ajustar-lo o ampliar-lo amb un avís d'almenys 20 segons (2.2.1).
• Canviar un valor no ha d'enviar, navegar ni moure el focus sense avís (3.2.2); fes servir un botó «Continua».
• Mantén l'ajuda en el mateix ordre a tots els passos (3.2.6) i ofereix revisió abans d'enviar (3.3.4).