Has recorregut les tres capes d'avaluació: automàtica (06-02), manual (06-01) i amb usuaris reals (06-03). El resultat és un munt de troballes heterogènies: violacions d'axe, notes de la teva llista de comprovació manual, cites de la Marta, temps de la Lucía. Ara ve la part que separa una auditoria útil d'un PDF que ningú no llegeix: interpretar aquests resultats i actuar-hi amb criteri. Un informe amb 200 troballes sense prioritat paralitza; un amb 6 troballes ben ponderades i convertides en tasques mou el producte. En aquesta lliçó aprendràs a llegir un informe, entendre severitat i impacte, prioritzar, descartar falsos positius i tancar el cercle perquè els problemes no tornin.
Contingut
- Anatomia d'una troballa
- Severitat davant d'impacte en l'usuari
- Prioritzar: no tot és urgent
- VPAT / ACR: l'informe de conformitat
- Descartar falsos positius
- De troballa a tasca de remediació amb "criteri de fet"
- Informe d'auditoria de Cursalia (exemple)
- Prevenir regressions: accessibilitat a la Definition of Done
- Anatomia d'una troballa
Una troballa ben documentada —vingui d'una eina o d'una sessió amb usuaris— té sempre aquests camps. Si un informe no els porta, exigeix-los: sense ells no es pot actuar.
| Camp | Què diu | Exemple a Cursalia |
|---|---|---|
| Criteri WCAG | Quina pauta s'incompleix | 4.1.2 Nom, funció, valor |
| Nivell | A / AA / AAA | A |
| Ubicació | On passa (pàgina + selector) | Catàleg, button.fav-btn |
| Severitat / impacte | Quant fa mal a l'usuari | Crític (blocador) |
| Evidència | Prova: captura, cita, sortida de l'eina | "NVDA llegeix 'botó' sense nom" |
| Recomanació | Què fer (no com obligatòriament) | Donar nom accessible a la icona |
| Origen | De quina prova va sortir | axe-core + confirmat a mà |
El camp origen importa més del que sembla: una troballa que apareix a axe i en una sessió amb usuaris és inqüestionable; una que només va sortir d'una eina pot ser un fals positiu (secció 5).
- Severitat davant d'impacte en l'usuari
Compte a confondre dues coses:
- Severitat tècnica (la que assigna l'eina): axe diu "crític/seriós/moderat/menor" segons el seu catàleg de regles. És genèrica, no coneix el teu producte.
- Impacte en l'usuari: quant de mal real causa en el teu context. Depèn de si bloqueja una tasca i de a quanta gent afecta.
Un model simple per classificar l'impacte:
| Nivell | Significat | Exemple |
|---|---|---|
| Blocador | Impedeix completar una tasca essencial | La Marta no pot saber si es va matricular (06-03) |
| Seriós | Es pot completar, però amb gran esforç/frustració | La Lucía triga el triple pel focus que salta |
| Menor | Molesta, no impedeix res | Un alt redundant en una icona decorativa |
La clau: una fallada que axe marca com a "moderada" pot ser blocadora en el teu producte si cau al botó de matrícula, i una "crítica" d'axe pot ser menor si és en una pàgina que ningú no visita. La severitat de l'eina és el punt de partida, no la sentència.
- Prioritzar: no tot és urgent
Prioritzar és ponderar impacte × abast. Dos eixos:
- Gravetat per a qui ho pateix: blocador, seriós o menor? (secció 2).
- Abast: en quantes pàgines apareix i amb quina freqüència es fan servir? Una fallada a la fitxa de curs i el catàleg (les pàgines més visitades de Cursalia) afecta gairebé tots els usuaris; la mateixa fallada a la pàgina "Avís legal" afecta poquíssims.
quadrantChart
title Priorització de troballes
x-axis "Poc usada" --> "Molt usada"
y-axis "Impacte menor" --> "Impacte blocador"
quadrant-1 "ARREGLAR JA"
quadrant-2 "Planificar"
quadrant-3 "Backlog"
quadrant-4 "Ràpides si són barates"
"Èxit matrícula no anunciat": [0.9, 0.95]
"Focus salta en filtrar": [0.85, 0.6]
"Botó favorit sense nom": [0.8, 0.5]
"Contrast preu 4.35:1": [0.75, 0.45]
"alt buit en decorativa": [0.3, 0.15]
Regla pràctica: primer el blocador en pàgines molt usades; deixa per al final el menor en pàgines marginals. I si una cosa és trivial d'arreglar (5 minuts) encara que sigui menor, fes-la ja: surt gratis.
- VPAT / ACR: l'informe de conformitat
Quan una organització (o un client que comprarà Cursalia) vol saber "oficialment" com d'accessible és, es fa servir un document estàndard:
- VPAT (Voluntary Product Accessibility Template): la plantilla, publicada per l'ITI. És el format en blanc.
- ACR (Accessibility Conformance Report): el VPAT ja emplenat per al teu producte — l'informe resultant.
Recorre criteri a criteri (WCAG, i de vegades la norma EN 301 549 europea o la Secció 508 dels EUA) i marca cadascun amb un nivell de suport:
| Estat a l'ACR | Significat |
|---|---|
| Supports | Es compleix |
| Partially Supports | Es compleix amb excepcions |
| Does Not Support | No es compleix |
| Not Applicable | No aplica a aquest producte |
Per a què serveix: és el document que un comprador (una universitat, una empresa) demana abans de contractar un e-learning. Un ACR honest —que reconeix els seus "Partially Supports"— genera més confiança que un que jura "Supports" en tot. No el confonguis amb l'informe d'auditoria intern (seccions 1-3): l'ACR és de cara a tercers; l'auditoria és la teva llista de feina.
- Descartar falsos positius
Abans de crear tasques, filtra el soroll (ho vam veure a 06-02):
- Reprodueix la troballa a mà: si axe marca "contrast baix" en un text que resulta estar ocult o sobre imatge decorativa, no és un problema real.
- Verifica el context: un
aria-*marcat com a invàlid pot ser correcte per al teu patró concret. - Creua orígens: si una cosa apareix a l'eina però ni tu a mà ni els usuaris no la noteu, sospita. Si apareix en diversos orígens, és sòlida.
Documenta per què descartes cada fals positiu. Una troballa silenciada sense justificació es converteix, mesos després, en "per què vam ignorar això?".
- De troballa a tasca de remediació amb "criteri de fet"
Una troballa no és accionable fins que és una tasca amb un criteri de "fet" (definition of done) verificable. Compara:
- Malament (no accionable): "Millorar l'accessibilitat del catàleg".
- Bé (accionable): "Donar nom accessible al botó de favorit (
button.fav-btn). Fet quan: NVDA anuncia 'Afegeix a preferits, botó' i axe ja no reportabutton-name."
El criteri de "fet" ha de dir com es comprova i amb quina prova (automàtica, manual o d'usuari), tancant el cercle amb les tres lliçons anteriors.
- Informe d'auditoria de Cursalia (exemple)
Auditoria combinada de Cursalia (axe + llista de comprovació manual de 06-01 + sessió amb usuaris de 06-03). Troballes prioritzades:
| # | Troballa | WCAG (nivell) | Origen | Impacte | Abast | Prioritat |
|---|---|---|---|---|---|---|
| 1 | El missatge de matrícula amb èxit no s'anuncia (sense regió activa) | 4.1.3 (AA) | Usuaris (Marta) | Blocador | Flux de compra | P1 |
| 2 | El focus salta a l'inici de la llista en aplicar filtre | 2.4.3 (A) | Usuaris (Lucía) | Seriós | Catàleg | P1 |
| 3 | Botó "favorit" (icona) sense nom accessible | 4.1.2 (A) | axe + manual | Seriós | Catàleg, fitxa | P2 |
| 4 | Contrast del preu 4.35:1 (< 4.5:1) | 1.4.3 (AA) | axe + Pa11y | Seriós | Fitxa de curs | P2 |
| 5 | Botó sticky tapa el preu a zoom 300% | 1.4.10 (AA) | Usuaris (Sofía) | Seriós | Fitxa de curs | P2 |
| 6 | alt redundant en icona decorativa del footer |
1.1.1 (A) | axe (alerta) | Menor | Totes | P3 |
Pla de remediació, cada troballa mapejada a la lliçó del curs on és la solució:
| # | Tasca | Criteri de "fet" | S'arregla amb (lliçó) |
|---|---|---|---|
| 1 | Anunciar el resultat de la matrícula a lectors de pantalla | NVDA llegeix el missatge d'èxit en confirmar | Contingut dinàmic / regions actives — Mòdul 7 |
| 2 | No moure el focus a l'inici en filtrar | Amb teclat, el focus roman on estava després de filtrar | Gestió de focus — Mòdul 5 (05-01/05-02) |
| 3 | Nom accessible al botó de favorit | NVDA anuncia "Afegeix a preferits"; axe sense button-name |
Alternatives de text / ARIA — Mòdul 4-5 |
| 4 | Pujar el contrast del preu a ≥ 4.5:1 | DevTools marca ✓ AA; Pa11y sense error de contrast | Contrast i color — Mòdul 4 (04-04) |
| 5 | Evitar la superposició sticky a zoom alt | A 300-400% el preu es llegeix sense quedar tapat | Redimensionament / reflux — Mòdul 4 (04-04) |
| 6 | Marcar la icona com a decorativa (alt="") |
El lector la ignora; desapareix l'alerta | Alternatives de text — Mòdul 5 (05-04) |
Fixa't en dues coses: les tres troballes més greus (P1) van sortir d'usuaris i del manual, no de l'eina — just el missatge del mòdul. I cada tasca remet a on ja vas aprendre a arreglar-la: l'avaluació tanca el bucle amb la construcció.
- Prevenir regressions: accessibilitat a la Definition of Done
Arreglar les 6 troballes no serveix de res si d'aquí a dos sprints tornen. Perquè no regressin, l'accessibilitat entra a la Definition of Done de l'equip: una història no està "acabada" fins que compleix criteris d'accessibilitat. Exemple de llista de comprovació de DoD per a Cursalia:
DEFINITION OF DONE — Accessibilitat
[ ] Linter jsx-a11y sense errors (06-02)
[ ] Tests axe-core a CI en verd per a les pàgines tocades (06-02)
[ ] Llista de comprovació manual de teclat + lector passada al component nou (06-01)
[ ] Focus visible i ordre del focus correctes (06-01)
[ ] Sense regressions en criteris ja conformes de l'ACR (06-04)
[ ] Troballes d'usuaris obertes: cap P1/P2 sense resoldre (06-03)Així es tanca el cercle de tot el Mòdul 6: automàtic per no regressar, manual per al judici, usuaris per a la usabilitat, i informe per prioritzar i verificar. L'accessibilitat deixa de ser una auditoria puntual i es torna part del procés.
Errors Comuns i Consells
- Tractar la severitat de l'eina com a veritat absoluta: pondera-la per impacte real i abast en el teu producte.
- Prioritzar per "el fàcil" en lloc de per impacte: arreglar 20 coses menors mentre un blocador segueix viu és mala gestió (tret que el menor sigui trivial: això sí, cau).
- Confondre ACR amb auditoria interna: l'ACR és per a tercers; l'auditoria és el teu backlog. No els barregis.
- Tancar tasques sense criteri de "fet": "ja ho vaig mirar" no és fet. Defineix com es verifica i amb quina prova.
- No documentar falsos positius: es reobren eternament.
- Arreglar i no blindar: sense accessibilitat a la Definition of Done, tot regressa.
- Consell: a l'informe, ordena per prioritat i posa l'impacte en l'usuari en llenguatge humà ("la Marta no sap si s'ha matriculat"), no només el codi WCAG. Convenç més i prioritza millor.
Exercicis
Exercici 1. axe marca com a "crític" un alt absent en una icona decorativa del footer (apareix a totes les pàgines) i com a "seriós" que el missatge de matrícula amb èxit no s'anunciï (només al flux de compra). Segons el teu criteri d'impacte, quin prioritzes i per què la severitat de l'eina aquí enganya?
Exercici 2. Un client universitari demana "el VPAT de Cursalia" abans de contractar. Explica què li lliures exactament (VPAT vs ACR), quins estats de conformitat pot tenir cada criteri i per què convé ser honest amb els "Partially Supports".
Exercici 3. Converteix aquesta troballa en una tasca accionable amb criteri de "fet": "Contrast del preu insuficient (4.35:1) a la fitxa de curs, WCAG 1.4.3 AA, detectat per Pa11y." Indica també amb quina prova verificaries l'arranjament.
Solucions
Solució 1. Prioritzes el missatge de matrícula no anunciat, encara que axe el marqui "seriós" i l'alt "crític". Raó: el missatge no anunciat és blocador —la Marta no pot confirmar si es va matricular, al flux de compra, que és essencial i molt usat—, mentre que l'alt en una icona decorativa és menor (un lector la ignora sense perdre informació) per molt que aparegui a totes les pàgines. La severitat de l'eina és genèrica i no sap quina tasca bloqueja cada fallada en el teu producte; cal reinterpretar-la per impacte i abast reals.
Solució 2. Li lliures un ACR: el VPAT (la plantilla de l'ITI) ja emplenat per a Cursalia. Recorre cada criteri WCAG (i possiblement EN 301 549 / Secció 508) marcant-lo com a Supports, Partially Supports, Does Not Support o Not Applicable. Convé ser honest amb els "Partially Supports" perquè un ACR realista genera confiança i evita responsabilitat per afirmacions falses; jurar "Supports" en tot i que després el client trobi barreres destrueix la credibilitat i pot comportar conseqüències contractuals/legals.
Solució 3. Tasca: "Ajustar el color del preu a la fitxa de curs per assolir un contrast ≥ 4.5:1 sobre el seu fons (WCAG 1.4.3 AA)." Criteri de "fet": el comptagotes de contrast de les DevTools marca ✓ AA per a aquell text i Pa11y/axe ja no reporten l'error de contrast a #precio-curso. Verificació: prova automàtica (Pa11y/axe a CI) més una comprovació manual ràpida amb el color picker de 06-01. (El com ajustar el color és del Mòdul 4, lliçó 04-04.)
Conclusió
Amb aquesta lliçó tanques el Mòdul 6: ja no només saps construir interfícies accessibles, sinó verificar que ho són i actuar sobre els resultats. Domines el cicle complet —automàtic, manual, usuaris i informe— sobre pàgines "normals": una fitxa de curs, un catàleg, un formulari de matrícula. Però la web real és més difícil que això. Què passa quan el contingut canvia sense recarregar i cal anunciar-ho (la troballa P1 de la Marta apunta justament allà)? Quan tota l'aplicació és una SPA i la navegació no recarrega la pàgina? Quan Cursalia es tradueix a diversos idiomes i cal gestionar lang, direcció del text i localització? I cap a on va l'estàndard amb WCAG 3.0? Tot això —interaccions complexes i contingut dinàmic, accessibilitat en SPAs, internacionalització/localització i tendències futures— és el Mòdul 7, on portem l'après al terreny avançat.
Curs d'Accessibilitat Web
Mòdul 1: Introducció a l'Accessibilitat Web
- Què és l'Accessibilitat Web?
- La Importància de l'Accessibilitat Web
- Visió General de les Lleis i Normes d'Accessibilitat
- Introducció a les WCAG
Mòdul 2: Comprensió de les Discapacitats i les Tecnologies d'Assistència
- Tipus de Discapacitats
- Visió General de les Tecnologies d'Assistència
- Com Utilitzen la Web les Persones amb Discapacitat
Mòdul 3: Principis del Disseny Accessible
- Perceptible: Fer el Contingut Disponible als Sentits
- Operable: Interfície d'Usuari i Navegació
- Comprensible: Informació i Operació
- Robust: Compatibilitat amb Tecnologies Actuals i Futures
Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS
- HTML Semàntic
- Formularis Accessibles
- Ús de Rols i Propietats ARIA
- Contrast de Color i Redimensionament del Text
Mòdul 5: Accessibilitat en JavaScript i Multimèdia
- Creació de Widgets de JavaScript Accessibles
- Accessibilitat del Teclat
- Contingut de Vídeo i Àudio Accessible
- Proporcionar Alternatives de Text per a les Imatges
Mòdul 6: Proves i Avaluació de l'Accessibilitat
- Tècniques de Proves Manuals
- Eines de Proves Automatitzades
- Proves d'Usuari amb Tecnologies d'Assistència
- Interpretació d'Informes d'Accessibilitat
