Cas pràctic, exercicis i llista de comprovació

És el moment d'aplicar el que has après. En aquesta lliçó analitzaràs un procés real de compra a través dels ulls, les orelles i les mans de cinc persones diferents, relacionaràs cada barrera amb el seu criteri i decidiràs què cal corregir primer. Després tens exercicis d'autoavaluació amb la solució i una llista de comprovació per als teus propis projectes.

Cas pràctic: comprar un bitllet a Autocares del Levante

Autocares del Levante (empresa fictícia) ven bitllets d'autobús de llarg recorregut al seu web i a la seva app. Com a servei de transport de viatgers de llarg recorregut, els seus canals digitals són dins de l'àmbit de la Llei 11/2023 (PDF, s'obre en una finestra nova) (en el transport urbà, suburbà i regional l'abast de la llei és molt menor). La direcció vol saber si «una persona amb discapacitat pot comprar un bitllet». La teva tasca és respondre amb una cosa més útil que un sí o un no.

Pas 1. Definir la tasca i les persones

La tasca és comprar un bitllet d'anada de Múrcia a Madrid i portar-lo al mòbil. Per recórrer-la tries cinc persones amb necessitats diferents, basades en perfils reals:

• Lucía, 34 anys, cega: VoiceOver a l'iPhone i NVDA al portàtil.
• Antonio, 71 anys, degeneració macular i hipoacúsia: zoom al 200 % i text gran al mòbil; audiòfons.
• Raúl, 45 anys, tetraplegia: control per veu a l'ordinador.
• Marta, 28 anys, sorda signant; el castellà escrit és la seva segona llengua.
• Sara, 19 anys, TDAH i dislèxia: llegeix a poc a poc i es distreu amb facilitat.

Pas 2. Recórrer el procés amb cada persona

Recorres els set passos de la compra, inclosa l'ajuda, amb les eines de cada perfil (teclat, NVDA, VoiceOver, zoom al 400 %, text gran, control per veu i vídeo sense so) i anotes cada barrera:

Pas	Barrera detectada	A qui afecta	Criteri
Origen i destinació	Els suggeriments del camp de cerca no es poden triar amb teclat ni s'anuncien	Lucía, Raúl	2.1.1, 4.1.2
Horaris	Taula d'horaris que obliga a desplaçar-se en horitzontal amb zoom; places lliures només en verd	Antonio; persones amb daltonisme	1.4.10, 1.4.1
Seient	Seients de 18 píxels que només mostren un número; el lector diu «botó»	Lucía, Raúl, Antonio	4.1.2, 2.5.8
Dades del viatger	Errors del formulari només a la part superior i marcats en vermell	Antonio, Sara	3.3.1, 1.4.1
Pagament	Temporitzador de 10 minuts sense avís; per identificar-se i pagar cal transcriure un CAPTCHA de lletres distorsionades sense alternativa	Sara, Raúl, Antonio, Lucía	2.2.1, 3.3.8, 1.1.1
Bitllet	Bitllet en un PDF sense etiquetar: el lector el llegeix desordenat	Lucía	1.3.1
Ajuda	Vídeo «Com viatjar» sense subtítols; incidències només per telèfon	Marta, Antonio	1.2.2; canal alternatiu

Pas 3. Separar el que bloqueja del que molesta

No totes les barreres pesen igual. El que impedeix acabar la tasca va primer: l'emplenament automàtic inaccessible (la Lucía i en Raúl ni tan sols poden començar), els seients sense nom ni mida suficient, el temporitzador sense avís i el CAPTCHA. El desplaçament horitzontal dels horaris i el color de les places són seriosos, però l'Antonio aconsegueix avançar amb esforç. El vídeo sense subtítols no impedeix comprar, encara que deixa la Marta sense informació sobre el viatge, i el telèfon com a únic canal li impedeix resoldre qualsevol incidència.

Pas 4. Proposar solucions

• Emplenament automàtic amb un patró accessible: navegable amb fletxes i amb els suggeriments anunciats al lector.
• Seients com a botons de com a mínim 24 per 24 píxels, amb nom complet («Seient 12, finestreta, lliure») i estat llegible sense color.
• Avís abans que s'esgoti el temps, amb opció d'ampliar-lo amb un sol gest, i dades conservades.
• Eliminar el CAPTCHA de transcripció o substituir-lo per un mètode sense prova cognitiva.
• Errors al costat de cada camp, amb text i icona, i focus mogut al resum d'errors.
• Taula d'horaris que es reorganitza en targetes en pantalles estretes, places amb text («3 lliures»), vídeo subtitulat i canal de xat o formulari per a incidències.

Pas 5. Respondre a la direcció

La teva resposta no és «no és accessible», sinó: «Avui, una persona cega o que fa servir control per veu no pot comprar un bitllet sense ajuda, i una persona gran amb baixa visió o amb dificultats d'atenció pot quedar fora pel temporitzador. Corregint quatre components (cercador, mapa de seients, temporitzador i CAPTCHA) es desbloqueja la compra per als cinc perfils analitzats; la resta de millores es pot planificar en una segona fase». Una resposta així s'entén, es prioritza i es pot pressupostar.

Exercicis d'autoavaluació

1. A l'app d'Autocares del Levante, el carrusel de destinacions només avança lliscant el dit. La Lucía, amb VoiceOver, no aconsegueix passar de la primera targeta. Per què passa i com se soluciona?

Mostra la solució

Amb VoiceOver activat, el lliscament cap a un costat el fa servir el lector per passar a l'element següent, així que no arriba mai al carrusel. Cal afegir botons visibles «Anterior» i «Següent» amb nom accessible (o mostrar les destinacions en una llista). A més, així es compleix el 2.5.1 Gestos del punter.

2. Reescriu amb llenguatge respectuós aquesta frase d'una nota de premsa: «Gràcies al nou servei, els discapacitats i els invidents que pateixen problemes per comprar ho podran fer com les persones normals».

Mostra la solució

Una versió possible: «Amb el nou servei, les persones amb discapacitat, incloses les persones cegues, podran comprar els bitllets de manera autònoma, com la resta de la clientela». Se substitueixen «discapacitats», «invidents», «pateixen» i «normals», i el focus passa de la persona a l'autonomia.

3. La portada d'un gimnàs mostra un vídeo de fons que es reprodueix sol, en bucle, amb talls ràpids i llums estroboscòpics. Indica dos criteris WCAG que hi poden estar en joc i quina preferència del sistema hauria de respectar.

Mostra la solució

El 2.3.1 Llindar de tres flaixos o menys (si centelleja més de tres vegades per segon per sobre dels llindars, no es pot publicar) i el 2.2.2 Posar en pausa, aturar, amagar (moviment automàtic de més de cinc segons sense control per aturar-lo). Hauria de respectar la preferència de reduir el moviment (prefers-reduced-motion), mostrant una imatge fixa.

4. El servei d'atenció d'una companyia elèctrica funciona només amb un assistent telefònic que demana «digueu el vostre número de client». Quines necessitats funcionals de l'EN 301 549 (PDF, s'obre en una finestra nova) queden sense atendre?

Mostra la solució

Com a mínim la 4.2.6 Ús amb capacitat vocal nul·la o limitada (persones amb disàrtria, laringectomia o que no es comuniquen oralment) i la 4.2.4 Ús sense audició (persones sordes). També pot afectar la 4.2.10, pel temps de resposta. La solució és un canal escrit equivalent: xat, formulari o correu.

5. Tens 30 minuts per fer una primera revisió del formulari de reserva d'un hotel pensant en diversos perfils. Quines cinc proves faries?

Mostra la solució

Una selecció raonable: recórrer-lo només amb el teclat (focus visible i sense trampes); escoltar-lo amb NVDA o VoiceOver (noms de camps i botons); ampliar al 400 % (redistribució i missatges d'error a prop del camp); activar el text gran al mòbil (textos que es tallen); i cronometrar el procés buscant temporitzadors, CAPTCHA i dades repetides.

Llista de comprovació

• Defineixo la tasca completa abans de revisar pàgines soltes.
• Trio diverses persones amb necessitats diferents, incloses les combinades.
• Recorro el procés només amb el teclat.
• L'escolto amb un lector de pantalla a l'ordinador i al mòbil.
• Amplio al 400 % i activo el text gran del mòbil.
• Provo els botons principals amb control per veu.
• Reviso els vídeos sense so i els avisos sense àudio.
• Busco centelleigs, moviment automàtic i animacions en desplaçar-me.
• Comprovo que cap gest o moviment del mòbil no queda sense alternativa.
• Busco temporitzadors, CAPTCHA i dades que es demanen dues vegades.
• Verifico que hi ha un canal de contacte que no depèn de la veu.
• Reviso el llenguatge sobre discapacitat en textos i avisos.
• Prioritzo el que bloqueja la tasca per sobre del que només molesta.

Per continuar aprenent

• How People with Disabilities Use the Web (W3C WAI): perfils, eines, estratègies i històries de persones usuàries.
• Web Content Accessibility Guidelines (WCAG) 2.2 (W3C): el text oficial dels criteris citats al curs.
• EN 301 549 v3.2.1 (ETSI): la norma europea, amb les necessitats funcionals de l'apartat 4.2.
• Accessibilitat d'Apple: descripció de VoiceOver, Zoom, Control per veu i Control per botó.
• Accessibilitat a Android (Android Developers): com funcionen TalkBack i la resta de serveis d'accessibilitat a les apps.