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 gratis per fer els tests i els exercicis, desar el teu progrés i aconseguir el certificat.

És el moment d'aplicar tot el curs. Al cas pràctic revisaràs la llista de troballes que ha preparat una altra persona, decidiràs quines són errors reals i quines no, les citaràs bé i arribaràs a una conclusió de conformitat. Després tens exercicis amb solució i una llista de comprovació per a la teva feina diària.

Cas pràctic: l'accés i les transferències de Banc Ribera

Banc Ribera (entitat fictícia) ofereix banca en línia a particulars, un servei inclòs en l'àmbit de la Llei 11/2023. Un company que acaba de començar ha revisat el procés «iniciar la sessió, consultar moviments i fer una transferència» i et passa les seves notes. La teva tasca és validar-les abans que arribin a l'equip de desenvolupament.

Pas 1. Fixar el marc de referència

Abans de mirar cap troballa, deixa clar amb què s'avalua: WCAG 2.2, nivell AA, és a dir, els 55 criteris de nivell A i AA. L'abast és un procés complet: si falla qualsevol dels seus passos, el procés no és conforme. I com que la banca en línia és una aplicació d'una sola pàgina, cada vista i cada estat (missatges, finestres, menús oberts) forma part de la pàgina que s'avalua.

Pas 2. Contrastar cada troballa amb l'enunciat i les excepcions

Troballa anotadaError en AA?Criteri i motiu
1. El logotip del banc té un contrast de 2,1:1NoL'1.4.3 Contrast (mínim) exceptua el text dels logotips.
2. El camp de contrasenya no permet enganxar i no hi ha cap altre mètode d'accésSí3.3.8 Autenticació accessible (mínim), AA: no hi ha mecanisme d'ajuda ni alternativa.
3. El botó «Entra», desactivat fins que s'emplenen els camps, té el text gris a 2,5:1NoText d'un component inactiu: exceptuat de l'1.4.3.
4. En tabular per la taula de moviments, la capçalera fixa tapa completament la fila amb el focusSí2.4.11 Focus no ocult (mínim), AA.
5. Els imports negatius es mostren només en vermell, sense signe menysSí1.4.1 Ús del color, A.
6. Icones «Descarrega el justificant» de 16 per 16 píxels, una per fila, en files de 20 píxels, sense cap altra manera de descarregarSí2.5.8 Mida de l'objectiu (mínim), AA: els cercles de 24 píxels se solapen i no hi ha cap control equivalent.
7. El text general té un contrast de 5,2:1: «no compleix l'1.4.6»NoL'1.4.6 és AAA. El text compleix l'1.4.3 (4,5:1).
8. La sessió caduca després de 5 minuts d'inactivitat, amb avís previ i botó «Continua connectat»NoEl 2.2.1 Temps ajustable es compleix: s'avisa i es pot ampliar amb una acció senzilla.
9. En tornar del pas 3 al pas 2 de la transferència, l'IBAN, el beneficiari i el concepte apareixen buitsSí3.3.7 Entrada redundant, A.
10. La transferència s'executa en prémer «Envia», sense pantalla de revisió, sense opció d'anul·lar i sense validar l'IBANSí3.3.4 Prevenció d'errors (legals, financers, dades), AA.
11. El validador HTML dona 14 errors: «error del 4.1.1»NoEl 4.1.1 està retirat a WCAG 2.2. Cal comprovar si algun error, com un id duplicat, provoca un error de l'1.3.1 o del 4.1.2.
12. El botó de xat d'ajuda és a la capçalera a «Moviments» i al peu a «Transferències»Sí3.2.6 Ajuda coherent, A: no manté el mateix ordre relatiu.

Pas 3. Marcar el que no s'aplica

El procés no conté àudio ni vídeo, així que els criteris de la pauta 1.2 es marquen com a «no aplicable». No és un compliment ni un incompliment: simplement no hi ha contingut d'aquest tipus. En canvi, el límit de temps de la sessió sí que existeix, per la qual cosa el 2.2.1 s'aplica i, segons la troballa 8, es compleix.

Pas 4. Arribar a una conclusió

De les 12 troballes, 7 són errors reals i 5 són falsos positius o no afecten el nivell AA. Amb set criteris incomplerts en un procés, la conclusió és clara: el procés no és conforme amb WCAG 2.2 AA. Fixa't en un detall revelador: cinc dels set errors (3.3.8, 2.4.11, 2.5.8, 3.3.7 i 3.2.6) corresponen a criteris nous de WCAG 2.2. Una revisió feta només amb WCAG 2.1 hauria trobat únicament l'1.4.1 i el 3.3.4.

Pas 5. Redactar perquè s'hi pugui actuar

Cada error es converteix en una incidència amb versió, criteri, nivell, ubicació, descripció, persones afectades, passos per reproduir-lo i resultat esperat. Per exemple: «WCAG 2.2, 1.4.1 Ús del color (A). A “Moviments”, els imports negatius només es distingeixen pel color vermell. Afecta persones amb daltonisme i qui fa servir un lector de pantalla. Esperat: signe menys o text “Càrrec” a més del color». Els falsos positius es retiren de la llista, explicant-ne el motiu perquè el company aprengui l'excepció.

Exercicis d'autoavaluació

1. Reescriu aquesta nota perquè sigui útil: «Error al menú: no compleix la pauta 2.1».

Mostra la solució

Per exemple: «WCAG 2.2, 2.1.1 Teclat (A). El submenú “Tràmits” de la capçalera només s'obre en passar-hi el ratolí; amb Tab no es pot accedir a les seves opcions. Afecta qui navega amb teclat o amb polsador. Esperat: el submenú s'obre amb Retorn o Espai». Les pautes no s'avaluen: es cita el criteri amb número, nom i nivell.

2. Al peu d'un web, els enllaços «Avís legal» i «Privadesa» són dins d'una frase i la seva zona clicable fa 16 píxels d'alçada. Incompleixen el 2.5.8?

Mostra la solució

No. S'hi aplica l'excepció «en línia»: l'objectiu és dins d'una frase i la seva mida la limita l'interlineat del text.

3. En un formulari de compra, en marcar la casella «Vull factura» apareixen a sota els camps de dades fiscals. Una revisora ho marca com a error del 3.2.2 En introduir dades. Té raó?

Mostra la solució

No. Segons el glossari, mostrar camps nous és un canvi de contingut, no de context: no canvia el focus, la finestra ni el significat de la pàgina. El 3.2.2 es compleix.

4. Una pàgina compleix tots els criteris A i AA excepte un vídeo amb locució sense subtítols, situat dins d'un acordió que està tancat en carregar. És conforme?

Mostra la solució

No. La conformitat és de la pàgina completa, inclosos els continguts que es mostren en interactuar. El vídeo incompleix l'1.2.2 Subtítols (enregistrat), així que la pàgina no és conforme.

5. Un web es va auditar amb WCAG 2.1 AA fa un any i es va corregir tot. Què cal revisar per afirmar que compleix WCAG 2.2 AA?

Mostra la solució

Els sis criteris nous de nivell A i AA: 2.4.11 Focus no ocult (mínim), 2.5.7 Moviments d'arrossegament, 2.5.8 Mida de l'objectiu (mínim), 3.2.6 Ajuda coherent, 3.3.7 Entrada redundant i 3.3.8 Autenticació accessible (mínim). El 4.1.1 deixa d'avaluar-se per si mateix. I convé comprovar que els canvis fets durant l'any no han introduït errors nous.

Llista de comprovació

  • Declaro sempre la versió i el nivell de referència: WCAG 2.2 AA.
  • Avaluo pàgines completes, amb tots els seus estats, i processos complets.
  • Cito els criteris amb número, nom i nivell, mai només la pauta o el principi.
  • Llegeixo l'enunciat complet i les excepcions abans de marcar un error.
  • Consulto al glossari els termes enllaçats del criteri.
  • Faig servir Understanding per resoldre els casos dubtosos a partir de la intenció.
  • Separo els criteris AAA de la conformitat AA.
  • Marco «no aplicable» quan no existeix el tipus de contingut, mai «compleix parcialment».
  • Reviso els sis criteris nous de la 2.2 encara que el web ja complís la 2.1.
  • No cito el 4.1.1 com a error a WCAG 2.2; busco l'efecte real a l'1.3.1 o al 4.1.2.
  • Redacto cada error amb la ubicació, les persones afectades, els passos per reproduir-lo i el resultat esperat.
  • Recordo que complir les WCAG és el mínim, no la garantia d'una bona experiència.

Per continuar aprenent

T'ha servit aquesta lliçó?

Crea el teu compte gratis 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 gratuït del nivell 1 quan aprovis l'examen

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