Nivell 4: Auditoria i avaluació WCAG 2.2 · Projecte final

Projecte final: auditoria WCAG 2.2 AA del portal de l'Ajuntament de Valdecierzo

Per acabar el nivell 4, audites de cap a peus un web realista i redactes l'informe, com en un encàrrec professional. Així demostres que saps aplicar el que has après, no només respondre preguntes. És un requisit per a l'examen del nivell.

20 comprovacions autocorregibles
Cal superar-ne 16 de 20
Informe d'almenys 400 paraules
Rúbrica de 7 criteris

L'encàrrec

L'Ajuntament de Valdecierzo (municipi fictici d'uns 18.000 habitants) t'encarrega l'auditoria del seu nou portal municipal abans de publicar-lo. L'abast és la versió de preproducció completa: les quatre seccions (Inici, Reservar instal·lació, Preus públics i Contacte) i el procés de sol·licitud de reserva, davant les WCAG 2.2 de nivell AA i amb correspondència amb la UNE-EN 301 549 v3.2.1. Tens deu dies hàbils. L'Ajuntament farà servir el teu informe per encarregar les correccions al seu proveïdor i per redactar la declaració d'accessibilitat que exigeix el RD 1112/2018.

Com fer-ho

Defineix l'abast i la mostra. Anota el nivell objectiu, la línia base (sistema, navegador i tecnologia de suport amb la seva versió) i la mostra: cada secció i els estats que provocaràs (menú i cercador en ús, formulari buit, amb errors i enviat, preguntes obertes, taula filtrada i paginada, mapa amb el focus, cada vista a 320 px). Explica si escau una mostra aleatòria.
Passa una eina automàtica (axe DevTools o WAVE) a cada secció. Recorda que només analitza el que és visible en aquell moment: mostra cada secció i cada estat abans d'executar-la. Verifica cada resultat i anota el que l'eina no pot veure.
Recorre-ho tot amb el teclat: Tab, Maj+Tab, Retorn, Espai, fletxes i Escapada. Comprova el focus visible, l'ordre, els paranys i què passa amb el focus i amb el títol en canviar de secció.
Fes servir un lector de pantalla (NVDA o VoiceOver) i l'arbre d'accessibilitat de l'inspector: noms, funcions i estats dels controls, etiquetes, alternatives de les imatges, estructura de la taula, missatges i idioma.
Prova el formulari: envia'l buit, amb «1234» al DNI i «ana@correo» al correu, i ben emplenat.
Revisa la part visual: mesura contrastos de text i de components amb un analitzador, comprova l'ús del color, el zoom al 200 %, el reajustament a 320 px CSS (verifica window.innerWidth), l'espaiat del text, la mida dels objectius i el contingut en moviment.
Registra cada troballa amb identificador, títol, criteri principal i secundaris, requisit de l'EN 301 549, ubicació, passos, resultat esperat i observat, evidència mesurable, a qui afecta, severitat i recomanació amb criteri d'acceptació. Una troballa és un problema: agrupa per component.
Respon les 20 comprovacions d'aquesta pàgina: cadascuna apunta a una zona concreta i es corregeix a l'instant. Compte: algunes zones compleixen.
Redacta l'informe: dades de l'encàrrec, resum executiu per a la direcció, abast i mètode, mostra, resultats per criteri, troballes, el que compleix, priorització i pla de correcció, limitacions i conclusió amb la situació de compliment que proposes.
Lliura'l perquè es corregeixi amb la rúbrica. Cada criteri de la rúbrica es puntua així: insuficient, del 0 al 40 % del seu pes; adequat, del 50 al 75 %; excel·lent, del 85 al 100 %. Després compara el teu treball amb l'informe model i amb l'exemple de correcció.

El web que auditaràs

Revisa'l aquí o obre'l en una pestanya nova (s'obre en una pestanya nova) per fer servir còmodament el teclat, el zoom, el lector de pantalla i les teves eines. És un web fictici creat per al projecte.

Fes el projecte

Les comprovacions i l'entrega de l'informe són per a qui té accés al nivell 4. Més avall pots veure la rúbrica amb què s'avalua l'informe i un exemple de correcció.

Inicia la sessió o aconsegueix l'accés

Rúbrica d'avaluació de l'informe

Criteri	Insuficient	Adequat	Excel·lent
Abast, mostra i línia base 10 punts	No indica el nivell objectiu ni quines vistes i estats s'han avaluat, o la mostra deixa fora el procés de reserva o estats clau (errors, enviament, 320 px). No hi ha línia base.	Indica WCAG 2.2 AA, les quatre vistes i el procés de reserva, i una línia base amb almenys un lector de pantalla i un navegador, però hi falten estats concrets, versions o la justificació de la mostra aleatòria.	Presenta la mostra en una taula amb cada vista i estat i el motiu de la inclusió, el procés complet, una línia base amb sistemes, navegadors, tecnologies de suport i versions, i explica per què no escau la mostra aleatòria.
Mètode i eines 10 punts	Només cita una eina automàtica o presenta la seva sortida o la seva puntuació com a resultat de l'auditoria; no descriu proves manuals.	Descriu proves automàtiques i manuals (teclat, lector de pantalla, contrast, 320 px), però sense versions o sense explicar com s'han verificat els resultats automàtics.	Segueix els passos de WCAG-EM, documenta eines i versions i què s'ha provat amb cada combinació, i assenyala quines troballes només s'han detectat manualment (per exemple, l'alt «plànol» o el parany del mapa).
Identificació i descripció de troballes 25 punts	Detecta menys de 9 dels 15 errors del lloc o inclou errors inexistents; les troballes no indiquen criteri, ubicació o evidència.	Detecta entre 9 i 12 errors amb criteri i ubicació; alguns no tenen passos ni mesurament (ràtio de contrast, píxels) o tenen el criteri mal assignat.	Detecta 13 errors o més sense falsos positius; cadascun té criteri principal i secundaris correctes, requisit de l'EN, ubicació, passos, resultat esperat i observat, evidència mesurable i a qui afecta.
Severitat i priorització 15 punts	No assigna severitat o l'assigna de manera incoherent (el parany del mapa com a baixa, l'idioma d'un paràgraf com a crítica); el pla segueix l'ordre dels criteris o de les pàgines, o no hi ha pla.	Fa servir una escala de quatre nivells raonable en la majoria de les troballes, amb algun desajust sense justificar; proposa fases però sense tenir en compte la freqüència o l'esforç.	Justifica cada severitat en una frase segons la tasca i les persones afectades, prioritza per impacte, freqüència i esforç, i proposa fases amb responsables i una alternativa provisional per al que és crític.
Recomanacions de correcció 15 punts	Les recomanacions són genèriques («millorar l'accessibilitat», «afegir ARIA») o copien el text de l'eina.	Cada troballa té una recomanació concreta, però hi falta el codi, on es corregeix o un criteri d'acceptació comprovable.	Cada recomanació fixa el resultat esperat, proposa la solució nativa més senzilla amb codi correcte, indica el component que es corregeix i acaba amb un criteri d'acceptació verificable.
Redacció per a la direcció i l'equip tècnic 15 punts	No hi ha resum executiu o és una llista de criteris; fa servir afirmacions absolutes («el lloc és inaccessible») o puntuacions automàtiques, les xifres no quadren o el document no té estructura.	El resum executiu dona l'estat i les xifres i les troballes s'entenen, però no descriu les barreres com a tasques que no poden fer persones concretes o barreja registres.	Resum d'una pàgina amb estat, xifres coherents amb el full de troballes, 3-5 barreres descrites com a tasques, primers passos i implicacions legals; part tècnica impersonal, amb vocabulari constant i document accessible (encapçalaments, taules amb th).
Conclusions, conformitat i limitacions 10 punts	No conclou, conclou que compleix o dona un percentatge d'accessibilitat; no esmenta limitacions.	Conclou que no hi ha conformitat AA i cita limitacions generals, però no relaciona el resultat amb l'EN 301 549 ni proposa una situació per a la declaració.	Conclou la no conformitat AA sobre la mostra i les dates, proposa una situació de compliment amb el càlcul de requisits de l'EN, separa el 2.5.8 com a «només WCAG 2.2» i enumera límits concrets.

Exemple de correcció amb la rúbrica

Fragment de l'informe d'una alumna

Resum executiu. El portal de l'Ajuntament de Valdecierzo és inaccessible per a les persones amb discapacitat. Hem trobat 11 errors. Lighthouse li dona una puntuació d'accessibilitat de 87, per la qual cosa el portal compleix aproximadament un 70 % de les WCAG. Recomanem corregir els errors al més aviat possible per evitar sancions.

Abast i mètode. He revisat les quatre seccions del portal amb Chrome, NVDA, axe DevTools i Lighthouse. També he provat el teclat i el zoom.

Troballes.

Mapa de contacte. Quan s'arriba al mapa amb el teclat no se'n pot sortir amb Tab. Criteri: 2.1.1 Teclat. Severitat: alta. Recomanació: revisar el JavaScript del mapa.

Selector d'instal·lació. Les targetes d'instal·lació són div sense tabindex ni rol. Passos: a «Reservar instal·lació», tabular des del camp Telèfon; el focus salta a Data i no es pot triar instal·lació, que és obligatòria, així que la sol·licitud no es pot enviar sense ratolí. Criteris: 2.1.1 Teclat i 4.1.2 Nom, funció, valor. Severitat: crítica, perquè bloqueja el procés de reserva. Recomanació: substituir-les per input type="radio" dins un fieldset amb legend «Instal·lació (obligatori)», mantenint l'aspecte de targeta amb CSS. Criteri d'acceptació: es tria una instal·lació amb Tab i fletxes i NVDA anuncia «botó d'opció, no marcat, 1 de 4».

Peu de pàgina. El text del peu té poc contrast. Criteri: 1.4.3. Severitat: mitjana. Recomanació: fer servir un gris més fosc.

Errors del formulari. En enviar amb errors, els camps es marquen en vermell. Criteri: 1.4.1 Ús del color. Severitat: alta. Recomanació: afegir aria-invalid.

Informació per a estrangers. El paràgraf en anglès no té lang. Criteri: 3.1.2 Idioma de les parts. Severitat: crítica, perquè una persona cega no entendrà el text.

Taula de preus. La primera fila fa servir td en lloc de th i NVDA no anuncia l'encapçalament de columna en moure's amb Ctrl+Alt+fletxes. Criteri: 1.3.1 Informació i relacions. Severitat: mitjana. Recomanació: th scope="col" a la primera fila i caption.

Camp Telèfon. axe indica que el camp no té etiqueta. Criteri: 1.3.1. Severitat: mitjana. Recomanació: fer servir label for="telefono".

Avisos de la portada. La banda es mou contínuament i no es pot aturar. Criteri: 2.2.2 Posar en pausa, aturar, amagar. Severitat: alta. Recomanació: afegir un botó de pausa.

Focus. El lloc no té focus visible. Criteri: 2.4.7. Severitat: alta. Recomanació: no treure l'outline.

Paginació. Els botons fan 18 × 18 px. Incompleix el requisit 9.2.5.8 de l'EN 301 549. Severitat: mitjana.

Imatges. Totes les imatges tenen text alternatiu, perquè axe no dona errors d'imatges.

Conclusió. El lloc és parcialment accessible i compleix el 70 % dels criteris.

Correcció amb la rúbrica

Puntuació per criteri de la rúbrica
Criteri (pes)	Nivell	Punts	Comentari del corrector
Abast, mostra i línia base (10)	Insuficient	3	Anomena les quatre seccions, però no el nivell objectiu, ni els estats avaluats (formulari amb errors i enviat, taula filtrada, 320 px), ni versions. Falta dir per què no hi ha mostra aleatòria.
Mètode i eines (10)	Adequat	6	Combina eines, teclat i NVDA, però no dona versions ni diu com va verificar la sortida d'axe. La troballa 11 mostra el risc: donar per bona una imatge perquè l'eina no protesta.
Identificació i descripció (25)	Adequat	15	Detecta 10 dels 15 errors. Li falten l'alt «plànol» (1.1.1), el títol que no canvia (2.4.2), la confirmació no anunciada (4.1.3), les preguntes sense rol ni estat (4.1.2) i els accessos ràpids a 320 px (1.4.10). El parany del mapa és el 2.1.2, no el 2.1.1 (el mapa sí que es fa funcionar amb fletxes); els errors tenen com a criteri principal el 3.3.1; «no té focus visible» generalitza: només falla el menú. El contrast no dona el mesurament (3,08:1, #8A8A8A sobre #F2F2F2). La troballa 2 és un bon model.
Severitat i priorització (15)	Insuficient	5	El parany del mapa és crític (bloqueja la pàgina i és de no interferència), no alt; el paràgraf sense lang és baix: el text se sent, encara que amb mala pronúncia. No hi ha pla per fases ni ordre per impacte, freqüència i esforç.
Recomanacions (15)	Adequat	8	Les de les troballes 2, 6 i 7 són concretes i la 2 inclou criteri d'acceptació. «Revisar el JavaScript», «un gris més fosc» o «afegir aria-invalid» no diuen què cal aconseguir ni com comprovar-ho; per als errors hi falta el text associat al camp.
Redacció (15)	Insuficient	5	«Inaccessible» és una afirmació absoluta, la puntuació de Lighthouse no mesura la conformitat i «evitar sancions» és alarmista. El resum no diu quines tasques no poden fer quines persones (per exemple, reservar sense ratolí). Les troballes sí que són impersonals i llegibles.
Conclusions i limitacions (10)	Insuficient	2	Un percentatge no és un veredicte: el portal no és conforme amb les WCAG 2.2 AA. No proposa cap situació per a la declaració, cita un requisit 9.2.5.8 que no existeix a l'EN 301 549 v3.2.1 (el 2.5.8 és només WCAG 2.2) i no esmenta limitacions.

Nota final: 44 sobre 100. El que és prioritari per al lliurament següent: verificar manualment el que l'eina no veu, revisar l'assignació de criteris amb la taula de diagnòstic diferencial, justificar cada severitat amb la tasca afectada i substituir les xifres automàtiques per un veredicte de conformitat i una situació de compliment raonada.

L'informe model d'aquesta auditoria es mostra quan entregues el projecte, perquè no condicioni el teu.