Addaw, anar a la pàgina d'inici Donar

Lliçó 10 de 10 · Cas pràctic · 25 min · Revisada el 26/10/2026

Cas pràctic, exercicis i llista de comprovació

Estàs llegint una lliçó oberta. Matricula't per fer els tests i els exercicis, desar el teu progrés i aconseguir el certificat.

Matricula-m'hi · nivell 7 (179 €)

Aquesta lliçó aplica el curs a un projecte realista: un cas resolt per fases, cinc exercicis amb solució, una llista de comprovació i recursos.

Cas pràctic: la nova venda de bitllets d'Autocares Ribera

Autocares Ribera (empresa fictícia, 180 persones en plantilla) opera línies interurbanes d'autobús i ven bitllets al seu web i a la seva app. Com a servei de transport de viatgers adreçat a consumidors, el seu web, la seva app i els seus bitllets electrònics entren en l'àmbit de la Llei 11/2023, aplicable des del 28 de juny de 2025, i l'empresa no es pot acollir a l'exempció de les microempreses. Vol rellançar la compra de bitllets en dotze mesos amb l'accessibilitat integrada en tot el projecte.

Pas 1: descobrir i mesurar

Fitxa de context: Llei 11/2023; WCAG 2.2 AA i EN 301 549 (capítol 11 per a l'app); matriu amb NVDA, VoiceOver, TalkBack i zoom al 200 % i al 400 %; tercers crítics: pagament, mapa de parades i galetes. La línia de base sobre el web actual (mostra de 14 pantalles més el procés de compra complet) dona 57 troballes: 38 provenen de set components de plantilla, 9 de contingut, 6 de tercers i 4 del flux. Hi ha dos bloquejants: el selector de seients no funciona amb el teclat i el pagament exigeix resoldre un CAPTCHA visual sense alternativa.

Pas 2: decidir el camí

El frontal és antic i el redisseny està aprovat: es reconstrueix. Però falten dotze mesos, així que al web actual s'aborden els bloquejants en dues setmanes: el CAPTCHA se substitueix per un mètode antiabús sense desafiament i s'afegeix un botó «Assigna el seient automàticament», que es pot fer servir amb el teclat, com a alternativa provisional. La resta es registra com a deute.

Pas 3: requisits, disseny i design system

El document de requisits inclou la clàusula d'accessibilitat i els criteris de sortida. La història «Triar seient» porta criteris observables: cada seient s'assoleix i se selecciona amb el teclat; el lector de pantalla anuncia número, posició (finestreta o passadís) i estat (lliure, ocupat, seleccionat); l'estat no depèn només del color; i l'assignació automàtica continua disponible. Abans d'estimar, una spike de tres dies prototipa el mapa amb el patró de quadrícula de l'APG. Els colors dels estats es defineixen com a tokens amb un contrast d'almenys 3:1 (1.4.11 Contrast no textual) i s'acompanyen d'icona i text.

Pas 4: construir i verificar

La plantilla de pull request inclou el bloc d'accessibilitat. Playwright amb axe-core analitza el procés de compra a cada pull request després d'obrir el mapa de seients, provocar un error a les dades del viatger i arribar al pagament; pa11y-ci rastreja cada nit 60 URL de l'entorn de proves. QA recorre la compra completa amb els tres lectors de pantalla a cada versió candidata.

Pas 5: la porta de sortida

L'avaluació prèvia al llançament troba un defecte greu fora dels fluxos crítics: a «Els meus viatges», el filtre per dates no anuncia quants resultats queden en aplicar-lo (4.1.3 Missatges d'estat). S'aprova una excepció de 30 dies amb alternativa (la llista completa, ordenada per data), registrada com a deute. La informació d'accessibilitat del servei es publica a les condicions generals, en HTML accessible, i atenció al client rep el seu guió.

Pas 6: operar i aprendre

La tercera setmana, una persona cega escriu al canal d'accessibilitat: el bitllet electrònic es descarrega com un PDF que el seu lector de pantalla no pot llegir. Triatge: greu (pot viatjar mostrant el codi, però no comprovar la data, l'hora ni el seient). Resposta en 24 hores amb les dades al cos del correu; correcció en tres setmanes: el bitllet passa a ser una pàgina HTML accessible amb el codi i un PDF etiquetat. A la retrospectiva, la pregunta «en quina fase s'hauria d'haver evitat?» té una resposta clara: a la definició, perquè el bitllet electrònic, inclòs expressament en l'àmbit de la llei, no figurava a l'inventari del projecte.

Exercicis d'autoavaluació

Exercici 1

Reescriu aquest criteri d'acceptació perquè sigui verificable: «El cercador d'horaris serà accessible».

Mostra la solució

Per exemple: (1) els camps d'origen, destinació i data tenen una etiqueta visible associada al camp; (2) els suggeriments del camp d'origen es recorren amb les fletxes i el lector de pantalla anuncia quants n'hi ha i quin està seleccionat; (3) en cercar, s'anuncia el nombre de resultats sense moure el focus (4.1.3 Missatges d'estat); (4) la taula d'horaris té encapçalaments de columna i es llegeix correctament amb NVDA i VoiceOver; (5) tot funciona amb un zoom del 400 % sense desplaçament horitzontal, llevat del que necessiti la mateixa taula d'horaris (1.4.10 Reajustament dels elements).

Exercici 2

En una revisió de codi trobes aquest seient del mapa. Quins problemes té i com el corregiries?

<div class="asiento libre" onclick="elegir(12)">12</div>
Mostra la solució

No es pot fer servir amb el teclat (2.1.1 Teclat), no exposa funció ni estat (4.1.2 Nom, funció i valor), «12» no informa de la posició i «lliure» només es transmet amb el color (1.4.1 Ús del color). Una correcció senzilla:

<button type="button" class="asiento" aria-pressed="false">
  Seient 12, finestreta, lliure
</button>

Els seients ocupats es marquen com a no disponibles i l'estat també es mostra amb una icona o un text. En mapes grans, el patró de quadrícula de l'APG evita centenars de pulsacions de Tab.

Exercici 3

Després d'una actualització del proveïdor de pagaments, el focus deixa de veure's al formulari de la targeta. Ningú de l'equip no ha tocat codi. Quin mecanisme ho hauria d'haver detectat i què fas ara?

Mostra la solució

Ho hauria d'haver detectat la vigilància de tercers (prova manual ràpida després de cada actualització anunciada) i, en part, les proves sintètiques del flux de compra en producció, tot i que un focus invisible sol escapar a axe i requereix una comprovació manual. Ara: registrar la incidència (2.4.7 Focus visible) com a greu en un flux crític; oferir una alternativa immediata (compra per telèfon o a la taquilla amb el mateix preu); exigir al proveïdor una correcció amb data; i afegir al contracte una clàusula d'avís i prova prèvia de les actualitzacions.

Exercici 4

El dia abans del llançament queden oberts tres defectes: (a) a Safari, el botó «Continua» de les dades del viatger no s'assoleix amb el teclat; (b) a les preguntes freqüents, els encapçalaments salten de nivell; (c) a l'àrea de client, la factura es descarrega com un PDF sense etiquetar. Es llança?

Mostra la solució

No, mentre continuï obert (a): és un bloquejant en un flux crític i no admet excepció, així que es corregeix abans de sortir o s'ajorna el llançament. (b) és moderat: es registra com a deute. (c) és greu fora del flux crític: pot sortir amb una excepció documentada, amb la factura en format accessible a petició com a alternativa, responsable, data límit i aprovació d'algú aliè a l'equip.

Exercici 5

L'equip migrarà 3.000 pàgines d'informació de línies a un nou gestor de continguts. Quines comprovacions automatitzaries abans i després?

Mostra la solució

Nombre d'imatges sense alt; estructura d'encapçalaments per pàgina; taules d'horaris sense th; vídeos sense pista de subtítols; documents enllaçats sense versió accessible; fragments amb atribut lang. Primer amb una mostra i després en la migració completa; si alguna xifra empitjora, s'atura i es revisa el mapa de camps.

Llista de comprovació final

  • Fitxa de context amb marc legal, persones usuàries, plataformes i tercers.
  • Matriu de tecnologies de suport acordada a l'inici.
  • Responsable principal assignat a cada grup de criteris.
  • Portes de qualitat definides entre fases, amb criteri i evidència.
  • Criteris d'acceptació observables en cada història.
  • Dissenys anotats amb tots els seus estats i revisats.
  • Components del design system amb patró APG i proves.
  • Bloc d'accessibilitat a la plantilla de pull request.
  • axe-core en els fluxos crítics i rastreig nocturn amb llindar.
  • Registre de deute amb impacte, abast i alternativa.
  • Criteris de sortida i procediment d'excepcions aprovats.
  • Declaració, informació d'accessibilitat o informe actualitzats en llançar.
  • Suport amb guió d'alternatives i escalat.
  • Línia de base i comparació abans i després en redissenys i migracions.

Per continuar aprenent

Portes 3 lliçons d'aquest curs: que no es perdin

Crea el teu compte i desa el que ja has llegit i segueix el curs amb tot:

  • El test d'aquesta lliçó (3 preguntes) per comprovar el que has après
  • Exercicis pràctics amb pàgines reals
  • El teu progrés desat: continues on ho vas deixar, des de qualsevol dispositiu
  • Constància del curs amb les hores i certificat del nivell 7 quan aprovis l'examen

Entres amb el teu compte de Google o només amb el teu correu electrònic. No cal contrasenya.

Matricula-m'hi · nivell 7 (179 €)