Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplica el curs complet a un encàrrec realista. Primer veuràs un cas resolt pas a pas: la revisió manual d'un tràmit d'una seu electrònica amb teclat, lectors de pantalla i l'inspector del navegador. Després tindràs cinc exercicis amb la seva solució, una llista de comprovació per a la teva propera sessió de proves i recursos oficials per continuar aprenent.

Cas pràctic: el volant d'empadronament d'una seu electrònica

L'Ajuntament de Villaserena (municipi fictici) està obligat pel RD 1112/2018 (PDF, s'obre en una finestra nova) i ha encarregat la revisió de la seva seu electrònica, sede.villaserena.example. La mostra, definida amb WCAG-EM (s'obre en una finestra nova), inclou el procés complet «Sol·licitar el volant d'empadronament»: fitxa del tràmit, formulari de dades amb cercador de carrers, desament d'esborrany, revisió, enviament i descàrrega del justificant. La teva tasca és la revisió manual amb tecnologies de suport.

Pas 1: preparar el lloc de proves i la matriu

Partint de la línia base acordada, fixes la matriu: NVDA amb Firefox i Chrome a totes les pàgines del procés; JAWS amb Chrome al procés complet; VoiceOver amb Safari a iOS i TalkBack amb Chrome a Android per al procés complet; i només teclat, zoom al 200 % i al 400 %, espaiat de text i tema de contrast a totes les pàgines. Anotes les versions el primer dia, fas servir un perfil de navegador sense extensions i demanes a l'ajuntament un entorn de preproducció amb el temps de sessió reduït a dos minuts.

Pas 2: passada amb teclat i zoom

El procés es completa amb teclat: el focus és visible i l'ordre és lògic. Al 400 %, el formulari es reajusta bé. Primer senyal d'alarma: al cercador de carrers, les fletxes mouen un ressaltat sobre els suggeriments, però res no indica què passa per sota. Ho anotes per a la passada amb lector.

Pas 3: passada amb NVDA i el visor de veu

• Cercador de carrers. En escriure «Maj» i prémer Fletxa avall, el visor de veu no mostra res. A la pestanya Accessibilitat de Chrome, el camp té rol de quadre de text, sense role="combobox", sense aria-expanded i sense aria-activedescendant; els suggeriments són li sense rol. Es reprodueix igual amb Firefox, JAWS i VoiceOver. Fallada del lloc: H-01, 4.1.2 Nom, funció i valor (A).
• Desar l'esborrany. Apareix un missatge emergent «Esborrany desat» durant tres segons. Res al visor de veu; al DOM, el missatge es crea a cada desament sense rol ni aria-live. H-02, 4.1.3 Missatges d'estat (AA).
• Enviar amb errors. Amb el DNI buit, el focus es queda al botó «Continuar» i no s'anuncia res. En tornar al camp, NVDA diu «DNI, editable, en blanc», sense el text d'error que es veu a sota: no està associat amb aria-describedby. H-03, 1.3.1 Informació i relacions (A) i 4.1.3 Missatges d'estat (AA).
• Avís de sessió. Als dos minuts apareix un bàner «La seva sessió caducarà d'aquí a 60 segons» amb el botó «Ampliar», inserit al final del DOM, sense rol ni moviment del focus. Amb lector, no es percep i la sessió expira. H-04, 2.2.1 Temps ajustable (A), amb el 4.1.3 com a secundari.

Pas 4: mòbil i criteri de l'auditor

Amb VoiceOver a iOS, l'indicador «Pas 2 de 4» és una llista amb list-style: none i Safari no l'anuncia com a llista. El text «Pas 2 de 4, Dades personals» sí que es llegeix complet. Apliques les preguntes de la lliçó de suport: la informació arriba i la tasca no se'n veu afectada. Descartat com a troballa; s'anota com a observació, amb la millora opcional role="list". Amb TalkBack es confirmen H-01 a H-04 sense diferències rellevants.

Pas 5: registrar H-01 de manera reproduïble

• Pàgina i estat: /tramites/volante-empadronamiento, pas 2, llista de suggeriments oberta.
• Passos: 1. Tab fins a «Carrer». 2. Escriure «Maj». 3. Prémer Fletxa avall dues vegades. 4. Prémer Retorn.
• Esperat: s'anuncien el rol de quadre combinat, l'estat expandit i cada suggeriment actiu; Retorn confirma el valor.
• Observat: no s'anuncia res en moure's pels suggeriments; el valor s'emplena sense confirmació.
• Combinacions: totes les de la línia base.
• Evidència: H-01_calles_nvda.txt (visor de veu), H-01_calles_arbol.png (panell Accessibilitat), H-01_calles.mp4 (15 s).
• Recomanació: patró de combo amb llista de l'APG (s'obre en una finestra nova): role="combobox", aria-expanded, aria-controls, role="listbox", role="option" i aria-activedescendant.

Exercicis d'autoavaluació

1. En un llistat de productes, NVDA anuncia «clicable» a cada targeta. Què fas?

2. Després de prémer «Aplicar els filtres», NVDA comença a llegir des del títol de la pàgina. Què comproves i quins criteris poden fallar?

3. L'arbre d'accessibilitat d'un combo és correcte i NVDA amb Firefox anuncia bé les opcions, però JAWS amb Chrome, que és a la línia base, no anuncia l'opció activa. Com procedeixes?

4. Un botó mostra «Descarregar» i el panell de Chrome indica que el seu nom és «Botó d'obtenció del justificant», procedent d'aria-label. Quin criteri falla i com es corregeix?

5. Després de tancar un modal, NVDA no llegeix res amb les fletxes en mode navegació i l'inspector mostra el contingut principal com a ignorat. Quina és la causa probable?

Llista de comprovació

• Matriu de combinacions fixada i versions anotades.
• Perfil de navegador net i ajustos de Tab configurats a macOS.
• Visor de veu de NVDA o historial de JAWS oberts durant la prova.
• Cada component comparat amb el seu patró de l'APG.
• Components provats amb Tab i en mode navegació.
• Opció activa de combos i llistes anunciada a cada pulsació.
• Diàlegs: rol, títol, fons inert i retorn del focus.
• Cada acció dinàmica revisada: focus, anunci i contingut nou.
• Estats d'error, esborrany, espera i caducitat de sessió provocats.
• Node de l'arbre inspeccionat a cada troballa de nom, rol o estat.
• Fallada confirmada en una segona combinació o en un cas mínim.
• Diferències de presentació descartades i documentades.
• Proves a iOS i Android fetes en dispositius reals.
• Cada troballa amb passos, esperat, observat, combinació i evidència.

Per continuar aprenent

• Web Content Accessibility Guidelines (WCAG) 2.2, recomanació del W3C.
• ARIA Authoring Practices Guide (APG): patrons i exemples de components.
• Accessible Name and Description Computation 1.2: com es calcula el nom accessible.
• Understanding 4.1.3 Status Messages: missatges d'estat explicats amb exemples.
• WCAG-EM (versió 2.0 del 2026, basada en la 1.0): la metodologia d'avaluació en què s'integra la revisió manual.