Cas pràctic, exercicis i llista de comprovació

És el moment d'aplicar tot el curs a un disseny complet. Revisaràs el disseny d'un tràmit municipal abans que passi a desenvolupament, relacionaràs cada problema amb el seu criteri, prioritzaràs i decidiràs el redisseny. Després tens exercicis d'autoavaluació amb la solució i una llista de comprovació per als teus propis projectes.

Cas pràctic: la cita prèvia del padró de Villaclara

L'Ajuntament de Villaclara (fictici) renovarà la seu electrònica. Com a administració pública, el seu web ha de complir el RD 1112/2018 (PDF, s'obre en una finestra nova), que presumeix la conformitat amb la norma harmonitzada EN 301 549 (PDF, s'obre en una finestra nova) (v3.2.1, basada en WCAG 2.1 AA); l'equip ha decidit dissenyar directament amb WCAG 2.2 AA per no quedar-se curt. Et lliuren a Figma el disseny de «Cita prèvia per al padró»: una fitxa del tràmit i un formulari de tres passos (triar dia i hora, dades personals, confirmació).

Pas 1. Aplicar les sis proves d'estrès

Recorres cada pantalla amb les proves de la lliçó de validació (320 px, text ampliat, sense color, recorregut de teclat, lectura lineal i estats oblidats) i anotes el que hi trobes:

Troballa	Prova que la revela	Criteri
Carrusel d'avisos a la capçalera que canvia cada 4 segons, sense pausa	Lectura lineal	2.2.2
Títol «Seu electrònica» als tres passos; passos indicats amb cercles de color	Lectura lineal i sense color	2.4.2, 1.4.1
Dies amb cites lliures marcats només en verd; caselles del calendari de 18 px enganxades	Sense color i mesura	1.4.1, 2.5.8
L'hora es tria arrossegant un control lliscant	Recorregut de teclat	2.5.7
El format del NIE només apareix en un tooltip que s'esvaeix en moure el ratolí	Lectura lineal	1.4.13, 3.3.2
A 320 px, el botó de xat fix tapa «Continua»	320 px	1.4.10, 2.4.11
La sessió caduca als 10 minuts sense avís	Estats oblidats	2.2.1
«Cita reservada. Afegeix al calendari» en un avís que desapareix als 3 segons	Estats oblidats	4.1.3, 2.2.1

Pas 2. Prioritzar

Classifiques per impacte en la tasca. Bloquegen la cita: el control lliscant d'hora (sense alternativa no es pot triar l'hora amb el teclat ni amb control per veu), els dies disponibles només en verd, el botó «Continua» tapat i la sessió que caduca sense avís. Dificulten molt: el títol repetit, els passos sense text i el format del NIE amagat. Molesten i distreuen: el carrusel automàtic. L'avís final és greu perquè és l'única manera de desar la cita al calendari.

Pas 3. Redissenyar

• Hora: botons d'opció amb les hores disponibles («09:30», «09:45»…), de 44 px d'alçada amb 8 px de separació.
• Calendari: dies de 40 per 40 px; els dies amb cita porten el text «Lliure» o una icona i el seu nom accessible inclou «hi ha cites disponibles»; llegenda visible a sobre del calendari.
• Orientació: títol «Pas 1 de 3: Dia i hora – Cita prèvia del padró – Seu electrònica de Villaclara», indicador de passos amb el nom de cada pas i H1 que canvia a cadascun.
• NIE: instrucció visible sota l'etiqueta («Exemple: X1234567L»).
• 320 px: el xat passa a ser un enllaç «Ajuda» al peu, a la mateixa posició a totes les pàgines (3.2.6).
• Sessió: avís modal dos minuts abans de caducar, amb «Continua connectat» i «Tanca la sessió».
• Confirmació: pàgina pròpia amb el resum de la cita, l'enllaç «Afegeix al calendari» i un missatge d'estat «Cita reservada» anunciat sense moure el focus.
• Avisos: targeta estàtica amb l'avís vigent, sense carrusel.

Pas 4. Validar de nou i anotar

Repeteixes les sis proves sobre el redisseny i prepares la capa d'anotacions: encapçalaments, ordre de focus numerat, noms accessibles («Dia 14 de novembre, hi ha cites disponibles»), estats de cada component, anuncis dinàmics i comportament a 320 px. Cada anotació es converteix en un criteri d'acceptació. Finalment, proposes provar el prototip en HTML amb dues persones usuàries de lector de pantalla i una persona gran abans de publicar.

Exercicis d'autoavaluació

1. La portada d'una botiga té un bàner animat en bucle que mostra tres ofertes, sense controls. Quin criteri incompleix i què proposaries?

Mostra la solució

Incompleix 2.2.2 Posar en pausa, aturar, amagar (A), perquè es mou més de cinc segons al costat d'un altre contingut. El millor és eliminar el bucle i mostrar les ofertes estàtiques; si es manté, un botó «Pausa» visible i primer en l'ordre de focus.

2. Una barra d'eines té botons d'icona (imprimir, compartir, descarregar) que només mostren el nom en un tooltip en passar-hi el ratolí. Quins problemes hi veus?

Mostra la solució

Amb el teclat i a les pantalles tàctils el nom no apareix; el tooltip també s'ha de mostrar amb el focus i complir 1.4.13 (descartable, sobrevolable, persistent). Cada botó necessita un nom accessible literal i coherent (4.1.2, 3.2.4). L'ideal és afegir text visible al costat de la icona.

3. En una sol·licitud de subvenció amb 40 camps, la sessió caduca als 20 minuts i es perden les dades. Què exigeixen les WCAG i què faries en el disseny?

Mostra la solució

2.2.1 Temps ajustable (A): permetre desactivar o ajustar el límit, o avisar abans que expiri amb almenys 20 segons per ampliar-lo amb una acció simple, fins a almenys deu vegades. En el disseny: avís modal amb «Continua connectat» i desament automàtic d'esborranys, que també resol 2.2.6 (AAA).

4. Les pestanyes d'una àrea privada indiquen la pestanya activa només amb el text en blau. Com ho corregeixes?

Mostra la solució

Incompleix 1.4.1 Ús del color. Afegeix-hi una indicació de forma (barra inferior gruixuda, fons diferent o negreta) amb un contrast d'almenys 3:1 (1.4.11) i anota que la pestanya activa s'exposa com a seleccionada a la tecnologia de suport.

5. Totes les pàgines d'un web municipal es titulen «Inici – Ajuntament». Quin criteri incompleix i quin patró proposes?

Mostra la solució

2.4.2 Pàgina titulada (A). Patró amb el que és específic primer: «Nom de la pàgina – Secció – Ajuntament», i en processos «Pas X de Y: nom del pas – Tràmit».

6. En arxivar un correu en una aplicació web apareix a baix un avís «Correu arxivat. Desfés» que desapareix als 3 segons. Què canviaries?

Mostra la solució

Una acció dins d'un avís temporal no dona temps a qui llegeix a poc a poc, fa servir ampliació o hi arriba amb el teclat (2.2.1), i el missatge s'ha d'anunciar sense moure el focus (4.1.3). L'avís ha de romandre fins que la persona el tanqui, o «Desfés» també ha d'estar disponible en un lloc estable, com la carpeta d'arxivats.

Llista de comprovació final

• Navegació, cercador i ajuda en el mateix ordre a totes les pàgines.
• Patró de títols amb el que és específic primer.
• Encapçalaments que descriuen el seu bloc.
• Enllaç «Salta al contingut» visible en rebre el focus.
• Almenys dues vies per arribar a cada pàgina.
• Cada element decidit com a botó o com a enllaç.
• Tots els estats dibuixats, sense dependre del color.
• Focus visible a cada component i mai tapat.
• Objectius de 24 px com a mínim, 44 px als principals.
• Alternativa de pulsació simple als gestos i als arrossegaments.
• Etiquetes visibles, errors en text i sense demanar dades dues vegades.
• Res no es mou sol sense poder posar-ho en pausa.
• Límits de temps amb avís i ampliació.
• Sis proves d'estrès superades.
• Anotacions lliurades i convertides en criteris d'acceptació.

Per continuar aprenent

• Pautes d'accessibilitat per al contingut web (WCAG) 2.2, W3C.
• Understanding WCAG 2.2: explicació detallada de cada criteri, W3C.
• Patrons de l'ARIA Authoring Practices Guide (APG), W3C.
• Consells per dissenyar amb accessibilitat, W3C WAI.
• Reial decret 1112/2018, sobre accessibilitat dels llocs web i aplicacions per a dispositius mòbils del sector públic, BOE.