El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Eines de Proves Automatitzades

Següent ►
►

A la lliçó 06-01 vas fer la feina lenta i honesta: recórrer la fitxa de curs de Cursalia amb teclat, NVDA, zoom i DevTools. Funciona, però no escala. Ningú repetirà a mà aquell recorregut en 40 pàgines, a cada desplegament, a cada pull request. Aquí entren les eines automatitzades: analitzen el codi (el DOM ja renderitzat) i troben, en segons, problemes objectius que a un humà li portarien mitja hora. Però abans de la primera captura, grava't aquesta xifra al front: l'automàtic detecta només un 30-40% dels problemes d'accessibilitat. No substitueix les proves manuals de 06-01, ni els usuaris reals de 06-03. És la primera capa d'una defensa en profunditat, no la defensa sencera.

Contingut

  1. Què pot veure i què no pot veure una màquina
  2. axe-core i axe DevTools (l'extensió)
  3. WAVE
  4. Lighthouse a Chrome DevTools
  5. Pa11y (línia d'ordres)
  6. Accessibility Insights
  7. Linting en desenvolupament: eslint-plugin-jsx-a11y
  8. Integració a CI: que ningú trenqui l'arreglat
  9. Taula comparativa
  10. Falsos positius i falsos negatius

  1. Què pot veure i què no pot veure una màquina

Un analitzador automàtic és un programa que recorre l'arbre del DOM i aplica regles deterministes: "tot <img> ha de tenir atribut alt", "un control de formulari ha de tenir nom accessible", "aquest ràtio de contrast és 2.9:1 i AA exigeix 4.5:1". Són comprovacions binàries i objectives, i aquí les màquines són imbatibles: ràpides, incansables i sense criteri propi que les despisti.

El problema és tot allò que requereix judici humà:

Què SÍ que detecta una màquina Què NO pot detectar
Falta l'atribut alt Si l'alt descriu bé la imatge ("foto professor" vs "IMG_2043")
Contrast de color per sota del llindar Si l'ordre de focus és lògic per a la tasca
Un <label> sense for associat Si el nom del botó té sentit en context
aria-* amb valors invàlids o rol inexistent Si un missatge d'error s'anuncia en aparèixer
Encapçalaments que salten de nivell (h1→h3) Si la pàgina és usable de debò amb NVDA
Idioma de pàgina absent (<html lang>) Si una icona comunica alguna cosa que el text no diu

Regla mental: la màquina et diu que l'alt existeix; només un humà sap si l'alt és bo. Per això el 30-40%: gairebé tot el qualitatiu se li escapa.

  1. axe-core i axe DevTools (l'extensió)

axe-core (de Deque) és el motor de regles d'accessibilitat més usat del món: és open source i és dins de gairebé tota la resta (Lighthouse, Accessibility Insights, molts tests). Aprendre axe és aprendre el vocabulari comú del sector.

La manera més ràpida de començar és l'extensió axe DevTools per a Chrome/Firefox/Edge:

  1. Instal·la l'extensió i obre el catàleg de Cursalia.
  2. DevTools → pestanya axe DevTools → Scan all of my page.
  3. Llegeix la llista d'Issues agrupada per severitat.

Llegir una violació al catàleg

Suposa que axe reporta això sobre les targetes de curs:

VIOLACIÓN: Buttons must have discernible text  (crítico)
Regla: button-name
Criterio WCAG: 4.1.2 Name, Role, Value (Nivel A)
Elemento: <button class="fav-btn"><i class="bi bi-heart"></i></button>
Cómo arreglar: el botón no tiene texto ni aria-label; añade un
nombre accesible ("Añadir a favoritos").

Com es llegeix una violació d'axe, camp a camp:

  • Regla (button-name): l'identificador tècnic; útil per cercar documentació i per silenciar falsos positius.
  • Criteri WCAG (4.1.2, nivell A): et diu quin estàndard incompleixes i amb quina prioritat.
  • Element: el selector exacte al DOM. És la icona de cor "favorit" sense text — just la fallada "botons sense nom accessible" que anticipàvem a 06-01.
  • Impacte (crític/seriós/moderat/menor): la pista de priorització que exprimirem a 06-04.
  • Com arreglar: la recomanació. El com real (donar nom accessible a una icona) el vas veure al Mòdul 4.

  1. WAVE

WAVE (de WebAIM) és una extensió que mostra els resultats superposats sobre la mateixa pàgina amb icones: errors en vermell, alertes en groc, elements estructurals, ARIA. És especialment didàctica perquè veus on és cada problema sense llegir selectors.

A la fitxa de curs de Cursalia, WAVE és excel·lent per detectar d'un cop d'ull: encapçalaments fora d'ordre, imatges sense alt, enllaços buits, contrast insuficient i regions/landmarks. La seva vista de Structure/Order ajuda a veure la jerarquia d'encapçalaments d'un cop. Detall important: les icones grogues són alertes, no errors — coses que potser estan malament i que un humà ha de revisar. WAVE és honest avisant que no n'està segur.

  1. Lighthouse a Chrome DevTools

Lighthouse ve integrat a Chrome (DevTools → pestanya Lighthouse → marca Accessibility → Analyze). Dona una puntuació de 0 a 100 i fa servir axe-core per sota.

Avantatge: és zero fricció, ja el tens. Trampa perillosíssima: la puntuació enganya. Un "95/100" a Cursalia no significa "95% accessible"; significa "el 95% de les comprovacions automàtiques passen", i aquestes comprovacions són només aquell 30-40% del total. Pots tenir 100/100 i una pàgina inusable amb lector de pantalla. Fes servir Lighthouse per a una foto ràpida i per vigilar regressions, mai com a certificat d'accessibilitat.

  1. Pa11y (línia d'ordres)

Pa11y és un analitzador que corre des del terminal, sense obrir un navegador a mà. Això el fa ideal per automatitzar i per ficar-lo en scripts.

# Instalación global
npm install -g pa11y

# Analizar una página del catálogo de Cursalia
pa11y https://cursalia.example/catalogo

# Elegir el estándar y formato JSON (para procesar después)
pa11y --standard WCAG2AA --reporter json https://cursalia.example/catalogo

Sortida típica (resumida):

Results for URL: https://cursalia.example/catalogo

 • Error: This element has insufficient contrast at this
   conformance level (4.35:1; required 4.5:1).
   — WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   — (#precio-curso-python)

 • Error: Anchor element found with no link content.
   — WCAG2AA.Principle4...H91.A.NoContent
   — (.card-link)

Amb Pa11y pots, per exemple, escanejar una llista d'URLs de Cursalia en un bucle i fer fallar el procés si apareix qualsevol error — la base per al pas de CI de la secció 8.

  1. Accessibility Insights

Accessibility Insights (de Microsoft) també fa servir axe-core, però afegeix dues coses molt valuoses:

  • FastPass: un escaneig automàtic ràpid (equivalent a axe) més una comprovació guiada d'ordre de tabulació que dibuixa fletxes numerades sobre la pàgina. És un pont estupend entre l'automàtic i el manual de 06-01.
  • Assessment: una revisió guiada, criteri a criteri, que et porta de la mà per les comprovacions manuals que la màquina no pot fer sola. Reconeix explícitament que l'automàtic no basta i t'obliga a posar l'ull humà.

  1. Linting en desenvolupament: eslint-plugin-jsx-a11y

Les eines anteriors actuen sobre una pàgina ja renderitzada. El linting actua abans: mentre escrius el codi, a l'editor. Per a projectes React/JSX, eslint-plugin-jsx-a11y marca problemes d'accessibilitat al codi font.

// .eslintrc.js (extracto)
module.exports = {
  extends: ['plugin:jsx-a11y/recommended'],
  plugins: ['jsx-a11y'],
};

Exemple: si un desenvolupador de Cursalia escriu la targeta de curs així...

// El linter avisa EN TECLEJAR:
// "img elements must have an alt prop" (jsx-a11y/alt-text)
<img src={curso.portada} />

...ESLint ho subratlla en vermell abans de desar. És el feedback més barat possible: costa zero corregir una cosa que encara no ha sortit de l'editor. Limitació: només veu patrons estàtics al codi (falta un alt, un onClick en un <div> sense rol), no el resultat renderitzat ni el contrast real.

  1. Integració a CI: que ningú trenqui l'arreglat

Arreglar una fallada un cop és fàcil; que no torni és el difícil. La solució és córrer els anàlisis automàtics a integració contínua (CI): a cada pull request, un robot escaneja i bloqueja la fusió si apareixen violacions noves.

A alt nivell, un test automatitzat amb axe-core dins de les proves (Jest + jsdom, o Playwright/Cypress en un navegador real) es veu així:

// Ejemplo conceptual con Playwright + @axe-core/playwright
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('el catálogo de Cursalia no tiene violaciones axe', async ({ page }) => {
  await page.goto('https://cursalia.example/catalogo');

  const resultados = await new AxeBuilder({ page }).analyze();

  // El test FALLA si hay cualquier violación
  expect(resultados.violations).toEqual([]);
});

En un pipeline (GitHub Actions, GitLab CI…) això s'executa sol a cada push. Molts equips comencen de manera pragmàtica: no bloquegen per tot, sinó per violacions crítiques i serioses, i toleren temporalment les moderades mentre les van saldant. El mateix s'aconsegueix amb Pa11y en mode CI (pa11y-ci).

  1. Taula comparativa

Eina Tipus Què detecta bé Límits On encaixa al flux
axe DevTools Extensió navegador Base àmplia de regles WCAG, molt pocs falsos positius Només l'automàtic; no jutja sentit/usabilitat Revisió ad-hoc al navegador
WAVE Extensió navegador Molt visual; estructura, encapçalaments, contrast Menys integrable; les alertes requereixen criteri humà Aprendre i revisar visualment
Lighthouse A Chrome DevTools Foto ràpida amb puntuació; fa servir axe La puntuació enganya; cobertura parcial Cop d'ull ràpid / vigilar regressions
Pa11y CLI Automatitzable, múltiples URLs, sortida JSON Sense interfície visual; configuració inicial Scripts i CI
Accessibility Insights Extensió + guia FastPass + ordre de tabulació + revisió guiada La part d'assessment és manual Pont automàtic↔manual
eslint-plugin-jsx-a11y Linter (codi) Errors en JSX en escriure Només estàtic; no veu render ni contrast Mentre es programa
axe-core a CI Test automatitzat Impedeix regressions a cada PR Cobertura del ~30-40%; requereix muntatge Porta de qualitat al pipeline

Combinació recomanada per a Cursalia: jsx-a11y mentre es programa, axe-core a CI per no regressar, axe DevTools/WAVE per a revisions puntuals, i sempre a sobre el manual (06-01) i els usuaris (06-03).

  1. Falsos positius i falsos negatius

Cap eina no encerta el 100%:

  • Fals positiu: l'eina marca un error que no ho és. Exemple clàssic: WAVE avisa de "contrast baix" en un text que en realitat està ocult o sobre una imatge decorativa; o axe marca un aria que és correcte en el teu context. Es poden silenciar per regla i selector, però documenta per què — un silenciament sense justificar és deute ocult.
  • Fals negatiu (el perillós): l'eina diu "tot OK" i hi ha un problema real que no sap detectar. Un alt="imagen" genèric passa l'anàlisi (existeix l'atribut) però és inútil per a la Marta. Un ordre de focus absurd passa. Un missatge d'error que no s'anuncia passa. El verd de l'eina no és un aprovat.

Per això el flux sa és: automàtic per a l'objectiu i repetible → manual (06-01) per al judici → usuaris reals (06-03) per a la usabilitat.

Errors Comuns i Consells

  • Creure't la puntuació de Lighthouse: "tenim 98, som accessibles" és fals. Cobreix només l'automàtic. Mai no la posis al màrqueting com a segell d'accessibilitat.
  • Escanejar només la home: el modal de matrícula, el qüestionari i el reproductor només apareixen després d'interactuar. Moltes eines analitzen l'estat inicial; obre el modal abans d'escanejar o fes servir tests que interactuïn (Playwright).
  • Ignorar les alertes grogues: a WAVE/axe, "necessita revisió" no és "aprovat". És precisament on cal l'ull humà.
  • Silenciar sense documentar: cada regla desactivada ha de portar comentari i motiu, o es converteix en un forat permanent.
  • No posar res a CI: sense porta automàtica, el que arregles avui algú ho trenca la setmana que ve. Com a mínim bloqueja crítics i seriosos.
  • Consell: fes servir diverses eines; cadascuna té un catàleg de regles lleugerament diferent i juntes cobreixen més.

Exercicis

Exercici 1. Corres Lighthouse a la fitxa de curs de Cursalia i dona 100/100 en accessibilitat. El teu cap vol anunciar "web 100% accessible". Què li expliques, i quins dos tipus de prova falten abans d'afirmar això?

Exercici 2. axe reporta al catàleg: image-alt (crític), element <img src="portada-python.webp">, WCAG 1.1.1 (A). Un company ho "arregla" posant alt="imagen" i l'anàlisi passa a verd. Per què això és un fals negatiu i a quina persona segueix perjudicant?

Exercici 3. Dissenya l'estratègia automàtica mínima per a l'equip de Cursalia fent servir tres capes (durant el desenvolupament, a cada PR i en revisió puntual). Anomena una eina per capa i què faria cadascuna.

Solucions

Solució 1. Li expliques que Lighthouse només executa les comprovacions automàtiques, que cobreixen aproximadament un 30-40% dels criteris; el 100 significa "passen les comprovacions automàtiques", no "la web és accessible". Falten com a mínim les proves manuals (teclat + lector de pantalla + zoom, lliçó 06-01) i les proves amb usuaris reals de tecnologies d'assistència (06-03). Afirmar "100% accessible" sense elles és incorrecte i arriscat (fins i tot legalment).

Solució 2. És un fals negatiu perquè l'eina comprova que existeix l'atribut alt, no que el seu contingut tingui sentit. alt="imagen" satisfà la regla però no aporta informació: NVDA llegirà "imagen" i la Marta seguirà sense saber quin curs és. La màquina no pot jutjar la qualitat del text alternatiu; això es valida a mà (06-01) i es va decidir amb l'arbre de decisió de l'alt del Mòdul 5.

Solució 3. Exemple: (1) Durant el desenvolupament → eslint-plugin-jsx-a11y, que avisa a l'editor d'imatges sense alt o div clicables. (2) A cada PR → un test amb axe-core a Playwright que fa fallar el build davant de violacions crítiques/serioses, evitant regressions. (3) Revisió puntual → axe DevTools o WAVE al navegador abans d'una release gran, incloent-hi estats com el modal obert. I per sobre de les tres, el manual i els usuaris.

Conclusió

Les eines automatitzades són el teu multiplicador de força: ràpides, objectives, integrables a CI i perfectes perquè cap fallada objectiva no torni. Però tenen un sostre dur —aquell 30-40%— i un perill subtil: el verd d'un panell pot donar-te una falsa sensació de seguretat. Ni l'alt amb sentit, ni l'ordre de focus lògic, ni la usabilitat real amb un lector de pantalla els veu una màquina. Això només ho validen les persones. A la lliçó següent, 06-03 Proves d'Usuari amb Tecnologies d'Assistència, fem el salt definitiu: asseure la Marta, la Lucía i la Sofía —usuàries reals— davant de Cursalia i descobrir els problemes que ni l'automàtic ni la teva pròpia prova manual van arribar a veure.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2026. Tots els drets reservats