Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplica tot el curs a un encàrrec realista. Primer veuràs un cas resolt pas a pas, des de la configuració de les eines fins a la llista de troballes; després, cinc exercicis per comprovar el que has après, una llista de comprovació per a la teva propera anàlisi automàtica i recursos oficials per continuar aprofundint-hi.

Cas pràctic: la seu electrònica de l'Ajuntament de Valdeloma

L'Ajuntament de Valdeloma (fictici, uns 40.000 habitants) ha de revisar la seva declaració d'accessibilitat d'acord amb el RD 1112/2018 (PDF, s'obre en una finestra nova) i encarrega una auditoria del seu portal i la seva seu electrònica amb referència a les WCAG 2.2 AA, amb correspondència amb l'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova). El portal té unes 3.200 pàgines; la seu ofereix cita prèvia, instància general i pagament de tributs, i s'hi accedeix amb Cl@ve.

Pas 1: preparar i configurar

• Eines: axe DevTools com a principal i IBM Equal Access com a segona opinió, totes dues amb WCAG 2.2 AA i bones pràctiques en una secció a part; pa11y-ci amb axe com a motor per al rastreig; Colour Contrast Analyser per mesurar; inspectors del navegador i Accessibility Insights per a la part assistida.
• Fitxes d'execució: versions d'extensions, motor i navegador fixades el primer dia, finestra de 1.280 px i repetició a 320 px CSS.
• Acords amb el client: rastreig nocturn amb concurrència baixa; entorn de preproducció de la seu amb una identitat de prova facilitada per l'ajuntament; prohibit enviar instàncies o pagaments en producció.

Pas 2: rastreig i agrupació

El rastreig retorna 41.300 incidències. Agrupades per regla i selector, sis patrons de plantilla en sumen més de 37.000:

• link-name a les quatre icones de xarxes socials del peu: 12.800 instàncies (quatre per pàgina).
• color-contrast al text del peu, #8A8A8A sobre #F2F2F2: 3,1:1 a totes les pàgines.
• label al camp del cercador de la capçalera, que no té etiqueta associada ni cap altre nom accessible.
• region i heading-order (bones pràctiques) a la plantilla de notícies.
• aria-allowed-attr al menú principal (aria-selected sobre enllaços, on no està permès).

La resta són sobretot fallades de contingut, com 640 imatges de notícies sense alt repartides en 210 pàgines, que es corregeixen amb formació de les persones editores i no amb un canvi de plantilla.

Pas 3: anàlisi de la mostra i dels seus estats

A cada pàgina i estat de la mostra s'executen axe i IBM. Resultats rellevants: a la pàgina de cita prèvia, el calendari obert té botons de dia sense nom (button-name); el text blanc del titular de portada sobre una fotografia apareix com a «necessita revisió» i CCA mesura 2,9:1 al pitjor punt; i el formulari d'instància general, enviat buit, mostra missatges d'error amb contrast 3,6:1. IBM marca a més un possible problema d'aria-labelledby al selector de tràmit que axe no marca: en revisar-lo al panell Accessibility, el nom es calcula bé i es descarta com a fals positiu, anotant-ne el motiu.

Pas 4: revisió assistida i manual

Amb Tab stops es veu que el bàner de galetes queda fix a baix i tapa el focus del botó «Següent» (2.4.11 Focus no ocult (mínim)). El calendari no es pot fer servir amb teclat (2.1.1 Teclat). Els errors del formulari apareixen sense anunciar-se (4.1.3 Missatges d'estat) i no suggereixen com corregir-los (3.3.3). La sessió caduca als deu minuts sense avís (2.2.1 Temps ajustable). Cap no havia sortit a les eines.

Pas 5: troballes per a l'informe

De les 14 troballes finals de l'informe, 6 tenen origen automàtic verificat i 8 provenen només de la revisió assistida o manual. Les 41.300 incidències es redueixen a troballes amb instàncies comptades, i les bones pràctiques van a un annex de recomanacions.

Exercicis d'autoavaluació

1. En el cas, per què el rastreig no va trobar el problema del calendari de cita prèvia?

2. axe marca heading-order en 300 notícies. Ho comptes com a incompliment de l'1.3.1?

3. Configures axe-core per script només amb l'etiqueta wcag22aa i no apareix cap problema de contrast. Què ha passat?

4. Un botó mostra el text «Pagar» i té aria-label="Continuar". Cap eina no el marca. Quin criteri revises i amb quina eina ho confirmes?

5. En la reauditoria de sis mesos després, les incidències automàtiques han baixat un 50 %. Què comproves abans de comunicar la millora?

Llista de comprovació

• Norma configurada de manera explícita (WCAG 2.2 AA) a cada eina.
• Versions d'eines, motor i navegador fixades i anotades.
• Fitxa d'execució i sortida en brut guardades per a cada anàlisi.
• Rastreig acordat amb el client: horari, concurrència i comptes de prova.
• Cap enviament real de formularis, pagaments o registres en producció.
• Resultats agrupats per regla i selector; plantilla separada de contingut.
• Cada pàgina de la mostra analitzada en tots els seus estats i a 320 px.
• Iframes, Shadow DOM, canvas i multimèdia revisats a mà.
• Tot el que està marcat com a «necessita revisió» resolt manualment.
• Cada violació reproduïda i associada a criteri WCAG i clàusula EN.
• Bones pràctiques en una secció de recomanacions a part.
• Falsos positius descartats documentats amb el seu motiu.
• Criteris sense regla automàtica avaluats un per un.

Per continuar aprenent

• Regles ACT del W3C: cada regla amb la seva aplicabilitat, expectatives i casos de prova.
• Llista d'eines d'avaluació del W3C, filtrable per normativa i tipus.
• WCAG-EM, la metodologia d'avaluació en què encaixen les eines.
• Understanding WCAG 2.2, amb les tècniques i fallades documentades de cada criteri.
• Accessibilitat al portal d'Administració Electrònica, amb l'Observatori d'Accessibilitat Web i la seva metodologia de seguiment.