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

Lliçó 8 de 10 · 10 min de lectura · Revisada el 26/10/2026

Rastrejadors i monitoratge: pa11y, axe en integració contínua i observatoris

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 4 (49 €)

Una extensió de navegador analitza la pàgina que tens al davant. Per explorar un lloc de milers de pàgines, vigilar que no es degradi després de cada desplegament o complir el seguiment que exigeix la normativa calen rastrejadors i monitoratge continu. Aquesta lliçó explica les opcions habituals, com configurar-les sense generar soroll i com encaixen amb la tasca dels observatoris públics.

Rastreig puntual per explorar i detectar fallades sistemàtiques

En el pas 2 de WCAG-EM (s'obre en una finestra nova), un rastreig dona una visió del lloc impossible d'obtenir a mà: quantes plantilles hi ha, quines tecnologies s'utilitzen, quants PDF s'enllacen, quins problemes es repeteixen. Les eines de rastreig recorren enllaços a partir d'un URL inicial o d'un sitemap.xml, carreguen cada pàgina en un navegador sense interfície (headless) i hi apliquen un motor de regles.

  • pa11y i pa11y-ci: eina de línia d'ordres en Node.js que pot utilitzar HTML_CodeSniffer o axe-core com a motor. Accepta una llista d'URL o un sitemap, permet accions prèvies (iniciar sessió, prémer un botó) i genera informes en JSON, CSV o HTML. pa11y-ci retorna un codi d'error si se superen llindars, cosa que el fa apte per a integració contínua.
  • axe-core CLI i @axe-core/playwright o @axe-core/puppeteer: executen les regles d'axe en una o diverses pàgines controlades per script; és la manera més flexible d'analitzar estats (obrir el menú, emplenar el formulari amb errors i llavors analitzar).
  • Lighthouse CI: executa auditories de Lighthouse a cada build i les compara amb un pressupost de puntuació.
  • Rastrejadors comercials: plataformes que rastregen periòdicament el lloc sencer, guarden un historial i ofereixen panells. Útils per a organitzacions grans; en una auditoria externa són un suport, no el mètode.

Exemple

Configuració mínima de pa11y-ci per rastrejar un sitemap amb axe com a motor i nivell AA:

{
  "defaults": {
    "runners": ["axe"],
    "standard": "WCAG2AA",
    "timeout": 30000,
    "chromeLaunchConfig": { "args": ["--no-sandbox"] }
  },
  "urls": [
    "https://www.ejemplo.es/",
    "https://www.ejemplo.es/contacto",
    {
      "url": "https://www.ejemplo.es/buscar",
      "actions": [
        "set field #q to padron",
        "click element button[type=submit]",
        "wait for element .resultados to be visible"
      ]
    }
  ]
}

Execució: pa11y-ci --sitemap https://www.ejemplo.es/sitemap.xml o pa11y-ci amb el fitxer anterior.

Interpretar un rastreig massiu

Un rastreig de 5.000 pàgines pot retornar 60.000 incidències. Abans de treure'n conclusions:

  1. Agrupa per regla i per selector. El mateix enllaç del peu sense nom accessible apareix una vegada per pàgina; és una única troballa de plantilla amb 5.000 instàncies.
  2. Separa plantilla de contingut. Les fallades de plantilla (capçalera, peu, menú) es corregeixen una vegada; les de contingut (alt d'imatges de notícies, encapçalaments saltats en un article) requereixen formació d'editors i revisió progressiva.
  3. Descarta les regles de bones pràctiques del recompte d'incompliments, o informa'n en una secció a part.
  4. Identifica plantilles a partir dels patrons de resultats: les pàgines amb el mateix conjunt de regles fallades comparteixen plantilla. Això alimenta la mostra estructurada.
  5. Tracta l'estat «necessita revisió» com una llista de tasques manuals, no com un resultat.

Monitoratge continu en el cicle de desenvolupament

Per evitar que un lloc corregit es degradi, la comprovació automàtica s'integra en el flux de desenvolupament:

  • A l'editor i al commit: linters com eslint-plugin-jsx-a11y per a React, o regles d'accessibilitat a Angular i Vue, avisen en escriure el codi.
  • En proves unitàries i de component: jest-axe o vitest-axe executen axe sobre l'HTML renderitzat pel component.
  • En proves d'extrem a extrem: Playwright o Cypress amb axe analitzen pàgines completes i estats després de la interacció, amb sessió iniciada, en navegadors reals.
  • En la integració contínua: pa11y-ci o Lighthouse CI amb llindars que fan fallar el pipeline si apareixen violacions noves.
  • En producció: rastrejos programats (setmanals, mensuals) amb alertes quan augmenten les incidències.

La regla d'or de la integració contínua és zero violacions noves, no «zero violacions»: es fixa una línia base amb les incidències conegudes i el pipeline només falla si n'apareixen d'altres. Així l'equip no desactiva la comprovació per frustració.

Punt clau

El monitoratge automàtic protegeix el que l'auditoria manual ja ha aconseguit: detecta regressions dels problemes detectables. Continua calent una revisió manual periòdica (i cada vegada que s'incorpora un component nou) per a tot el que les regles no veuen.

Observatoris i seguiment normatiu

La Directiva (UE) 2016/2102 (PDF, s'obre en una finestra nova) obliga els estats a supervisar l'accessibilitat dels llocs i aplicacions públics. La Decisió d'execució (UE) 2018/1524 (PDF, s'obre en una finestra nova) defineix dos mètodes: el seguiment simplificat, automatitzat, que detecta incompliments sobre una mostra gran de llocs, i el seguiment en profunditat, manual i basat en una mostra de pàgines per lloc, que verifica tots els requisits. A Espanya l'executa l'Observatori d'Accessibilitat Web, que a més ofereix a les administracions un servei de diagnòstic en línia i publica informes periòdics i la metodologia de seguiment simplificat basada en la UNE-EN 301 549 (PDF, s'obre en una finestra nova).

Per a un auditor això té dues implicacions. Primer, els informes de l'observatori són una font útil en l'exploració: indiquen quins problemes detecta l'administració en aquell lloc o en el seu sector. Segon, el seguiment simplificat és automàtic i, per tant, comparteix els límits d'aquesta lliçó: un bon resultat no equival a conformitat, i el seguiment en profunditat (o una auditoria WCAG-EM) és el que realment mesura el compliment.

Bones pràctiques en configurar rastrejos

  • Respecta el servidor: limita la concurrència i la velocitat; avisa el client i demana-li que no bloquegin l'agent d'usuari del rastrejador.
  • Inclou estats i zones privades amb comptes de prova mitjançant accions d'inici de sessió.
  • Fixa la versió del motor i documenta regles i configuració a l'informe; una actualització d'axe-core pot canviar els resultats sense que el lloc canviï.
  • Guarda la sortida en brut (JSON) com a evidència al costat del resum.
  • Rastreja també en viewport mòbil: alguns problemes (menú hamburguesa sense nom, taules transformades) només hi existeixen allà.

Error freqüent

Configurar el pipeline perquè falli amb qualsevol violació des del primer dia. L'equip, amb 300 incidències heretades, desactiva la comprovació «temporalment» i no la torna a activar mai més. Comença amb una línia base i un llindar de «no empitjorar», i redueix-lo a mesura que es corregeix.

Resum

  • Els rastrejadors (pa11y-ci, axe CLI amb Playwright o Puppeteer, Lighthouse CI, plataformes comercials) permeten explorar llocs sencers i detectar fallades sistemàtiques.
  • Interpreta els rastrejos agrupant per regla i selector, separant plantilla de contingut i excloent les bones pràctiques del recompte d'incompliments.
  • En el cicle de desenvolupament, combina linters, proves de component, proves e2e amb axe i llindars de «zero violacions noves» en integració contínua.
  • El seguiment oficial (Decisió 2018/1524, Observatori d'Accessibilitat Web) té un mètode simplificat automàtic i un altre en profunditat manual; només el segon mesura la conformitat.
  • Documenta la versió del motor, la configuració i la sortida en brut; respecta el servidor i inclou estats i zones privades.

Portes 9 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 4 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 4 (49 €)