Al Mòdul 5 vam tancar amb un dubte incòmode: ja sabem construir components accessibles —un acordió amb aria-expanded, un modal amb focus trap, un vídeo amb <track>—, però funcionen de debò? Un aria-expanded que no se sincronitza, una trampa de focus amb fuga o un alt que sona estrany a NVDA no els descobreix el codi: els descobreix algú provant. Aquest mòdul és la fase de verificació, i comença pel més barat i el més revelador: provar a mà, tu mateix, sense llicències cares. En aquesta lliçó aprendràs a auditar la fitxa de curs de Cursalia fent servir només el teclat, un lector de pantalla gratuït, el zoom del navegador i les DevTools.

1. Per què començar pel manual
2. Prova només amb teclat
3. Prova amb lector de pantalla per a desenvolupadors
4. Prova de zoom i reflux
5. Verificació d'estructura amb DevTools
6. Comprovació manual de contrast
7. El patró "primer criteri que peten les presses"
8. Llista de comprovació manual reutilitzable

Les eines automàtiques (que veurem a la lliçó 06-02) detecten només un 30-40% dels problemes: veuen que falta un alt, però no si el text de l'alt té sentit. Les proves manuals cobreixen el judici humà que cap màquina no té: l'ordre de focus és lògic?, el nom accessible descriu el que fa el botó?, el focus visible es veu de debò?. I no necessites res més que el que ja tens a l'equip.

La regla mental: si tu no pots fer servir la pàgina amb el teclat i amb un lector de pantalla, el teu usuari tampoc.

Desa el ratolí en un calaix. Molts usuaris (la Lucía, amb mobilitat reduïda) naveguen només amb teclat. Les tecles fonamentals:

Obre la fitxa del curs "Python des de zero" i, sense tocar el ratolí, comprova:

• Focus visible: a cada Tab, veus clarament on és el focus? Si el disseny va fer outline: none sense substitut, aquest és el fallada número u (WCAG 2.4.7 Focus visible; i 2.4.11 Focus no ocult a WCAG 2.2).
• Ordre lògic: el focus ha de seguir l'ordre de lectura: capçalera → molla de pa → títol → botó "Matricula't" → pestanyes de descripció/temari/opinions → footer. Un tabindex positiu sol trencar-lo.
• Sense trampes de teclat: entra al reproductor de vídeo o al modal de matrícula. Pots sortir amb Tab o Esc, o et quedes "atrapat"? (WCAG 2.1.2 Sense trampes per al focus del teclat).
• Skip link: en prémer Tab just en carregar, apareix un enllaç "Salta al contingut"? S'ha de fer visible en rebre focus i portar al <main>.
• Operar el filtre del catàleg: els checkboxes de categoria i el selector de nivell s'han de marcar amb Espai/fletxes i aplicar-se sense necessitat de clic.
• Operar el modal de matrícula: en obrir-lo, el focus ha d'entrar al modal; Esc el tanca; i el focus ha de tornar al botó que el va obrir.

Consell: recorre la pàgina sencera dues vegades, endavant i endarrere. Moltes trampes només apareixen amb Shift+Tab.

No cal ser expert per detectar problemes grossos. La Marta fa servir NVDA cada dia; tu pots arrencar-lo 10 minuts i aprendre molt.

• Windows: instal·la NVDA (gratuït, nvaccess.org). Arrenca amb Ctrl+Alt+N. La tecla Insert és la "tecla NVDA".
• Mac: VoiceOver ja ve inclòs. Activa'l amb Cmd+F5. La combinació Ctrl+Opt és la "tecla VO".

Ordres bàsiques per a desenvolupadors:

• Navega pels encapçalaments (H): l'<h1> és el títol del curs? La jerarquia baixa de manera lògica (h1 → h2 → h3) sense salts?
• Navega pels landmarks (D): s'anuncien banner, navigation, main, contentinfo?
• Ves al botó "Matricula't": NVDA llegeix un nom accessible clar ("Matricula't a Python des de zero, botó") o només "botó" sense res més?
• Escolta les imatges: l'alt de la foto del professor, sona natural o diu "IMG_2043.jpg"?
• Obre l'acordió de temari: en expandir, anuncia "expandit/contret"? Aquí comproves l'aria-expanded del Mòdul 5 sonant de debò.

Tanca els ulls un minut i intenta completar la matrícula només amb l'oïda. És incòmode, i aquesta incomoditat és exactament la troballa.

La Sofía té baixa visió i navega amb zoom. Dues comprovacions diferents:

• Zoom del navegador al 200% (Ctrl/Cmd + +): WCAG 1.4.4 (Redimensionament de text) exigeix que el text escali al 200% sense pèrdua de contingut ni funcionalitat. Puja fins al 400%.
• Reflux a 320px (WCAG 1.4.10 Reflux): redueix la finestra a 320 CSS px d'amplada (o zoom 400% en 1280px) i comprova que no apareix scroll horitzontal i que res no se solapa ni es talla. El contingut ha de "refluir" a una sola columna.

Què falla típicament a Cursalia: la barra de filtres que se surt per la dreta, el preu que se superposa al botó, o un text en píxels fixos que no creix. Si necessites fer scroll en dues direccions per llegir un paràgraf, és una fallada. (El com s'arregla —unitats relatives, media queries— és al Mòdul 4).

No necessites res extern: el navegador ja inspecciona l'arbre d'accessibilitat (el que vam veure al Mòdul 2).

• Chrome/Edge: DevTools → pestanya Elements → panell Accessibility. Selecciona el botó "Matricula't" i llegeix-ne el Computed name, el Role i els estats. Allà veus si el nom accessible que vas sentir a NVDA ve del text, d'un aria-label o d'un <label>.
• Firefox: DevTools → pestanya Accessibility. Té comprovacions integrades de contrast i de teclat, i mostra l'arbre com a llista navegable.

Comprova l'estructura d'encapçalaments i landmarks de manera visual: un arbre amb un sol main, un h1 únic i una jerarquia sense salts. Si l'arbre mostra un botó "sense nom" (name buit), acabes de trobar el que a NVDA sonava a "botó" pelat.

Per a un cas puntual —el preu en gris clar sobre blanc, el text del botó— no cal escanejar tota la pàgina. Fes servir el comptagotes de contrast de les DevTools (Chrome mostra el ràtio en inspeccionar color, amb un ✓/✗ davant d'AA/AAA) o un color picker que doni el ràtio. Recorda els llindars del Mòdul 4:

• Text normal: 4.5:1 (AA).
• Text gran (≥24px, o ≥18.66px en negreta): 3:1 (AA).
• Components d'interfície i estats de focus: 3:1 (WCAG 1.4.11 Contrast no textual).

Quan un equip va amb presses, gairebé sempre cau el mateix primer. Tingue'l al radar:

1. Focus visible eliminat (outline: none "perquè quedava lleig").
2. Botons sense nom accessible (icones sense text: la lupa de cercar, la X de tancar).
3. Imatges amb alt buit o brossa en imatges informatives.
4. Ordre de focus trencat per tabindex positius o per maquetar movent l'ordre visual amb CSS.
5. Modal sense gestió de focus (no entra, no atrapa, no torna).

Si només tens 15 minuts, revisa aquests cinc: són els que afecten més usuaris per menys esforç.

Desa aquesta llista de comprovació com a plantilla: és la teva primera línia de defensa abans de tocar qualsevol eina automàtica.

• Provar amb ratolí "per costum": si toques el ratolí, ja no estàs fent prova de teclat. Sigues estricte.
• Confondre "jo, desenvolupador, amb NVDA" amb "un usuari real d'NVDA": tu saps on és tot. Això detecta fallades tècniques, no d'usabilitat (això és la lliçó 06-03).
• Provar només el "camí feliç": prova també errors de formulari, estats buits i el modal obert/tancat diverses vegades.
• Refiar-te del focus en un sol navegador: el focus visible i el reflux varien; revisa com a mínim Chrome i Firefox.
• Consell: automatitza el repetitiu (06-02) i reserva el teu temps manual per al judici (ordre, noms, sentit de l'alt).

Exercici 1. Recorres amb Tab la fitxa de curs de Cursalia i detectes que, en obrir el modal de matrícula, el focus no hi entra i es queda darrere, a la pàgina. Quin criteri WCAG s'incompleix i a quines persones afecta més?

Exercici 2. Amb NVDA navegues per encapçalaments (H) al catàleg i sents: h1, després h3, després h2. Quin problema hi ha i per què importa per a la Marta?

Exercici 3. Dissenya una mini-sessió de 15 minuts per revisar el reproductor de vídeo de Cursalia només amb teclat i lector de pantalla. Llista 4 comprovacions concretes.

Solució 1. S'incompleix 2.4.3 Ordre del focus (i la gestió de focus del patró modal del Mòdul 5): en obrir el modal el focus s'hi ha de moure. Afecta sobretot la Lucía (només teclat) i la Marta (lector de pantalla), que queden "fora" del diàleg sense saber que s'ha obert. L'arranjament és al patró de modal del Mòdul 5.

Solució 2. Hi ha un salt de nivell d'encapçalament (h1 → h3 → h2): la jerarquia no és coherent. Incompleix l'ús correcte d'encapçalaments (1.3.1 Informació i relacions). La Marta fa servir els encapçalaments com a índex per saltar per la pàgina; una jerarquia trencada li dona un mapa mental equivocat de l'estructura.

Solució 3. Exemple: (1) S'arriba al botó Play amb Tab i s'activa amb Enter/Espai? (2) Els controls (volum, subtítols, barra de temps) són operables per teclat i anuncien el seu nom a NVDA? (3) El botó de subtítols anuncia el seu estat activat/desactivat? (4) El focus és visible sobre els controls i no queda atrapat dins del vídeo?

Les proves manuals són la teva xarxa de seguretat més barata i més honesta: amb teclat, lector de pantalla, zoom i DevTools detectes la majoria dels problemes greus abans d'escriure una línia de test. Però són lentes i depenen de la teva disciplina. A la lliçó següent, 06-02 Eines de Proves Automatitzades, veurem com delegar a les màquines la part repetitiva i objectiva —recordant sempre que l'automàtic només cobreix un 30-40% i mai no substitueix el que acabes d'aprendre aquí.