Presentació del curs en vídeo

0:00 Et donem la benvinguda

Hola, et donem la benvinguda a WAI-ARIA: fonaments, un curs del nivell 3 de la Certificació ADDAW d'Accessibilitat Digital. ARIA és el vocabulari que completa l'HTML quan aquest no n'hi ha prou. És un curs per a qui desenvolupa o audita interfícies web i vol fer servir ARIA amb criteri: sense por, i sense excessos.

0:22 Què és ARIA i què no

ARIA canvia el que perceben els lectors de pantalla i la resta de tecnologies de suport: el rol, el nom, l'estat. Però no hi afegeix comportament. Si poses el rol de botó a un bloc genèric, el lector dirà: «Botó.» Encara que no rebi el focus ni respongui al teclat. ARIA és una promesa que el teu codi ha de complir.

0:45 Cinc regles

Tot el curs es basa en cinc regles. Fes servir primer l'HTML natiu. I no destrueixis la semàntica que ja existeix. Fes que cada control sigui operable amb teclat. I no amaguis al lector res que pugui rebre el focus. Finalment, dona un nom a tot el que és interactiu. Per això es diu que és millor no fer servir ARIA que fer-lo servir malament.

1:08 Del codi al lector

Veuràs el camí que recorre cada atribut: del codi a l'arbre d'accessibilitat, d'aquí a la interfície del sistema operatiu i, finalment, al lector de pantalla. Entendràs per què el mode d'exploració es menja les fletxes d'un component sense rol. I per què el rol d'aplicació gairebé mai no està justificat.

1:29 Rols, estats i propietats

Per a cada component cal respondre tres preguntes: què és, com es diu i com està. És el que exigeix el criteri 4.1.2, Nom, funció i valor. Per exemple, un interruptor d'avisos necessita el seu rol, el seu text i un estat d'activat o desactivat que s'actualitzi cada vegada que es prem.

1:52 Llegir l'especificació

Aprendràs a consultar les fonts en lloc de copiar fragments. La fitxa de cada rol diu on ha de ser, què ha de contenir i quins atributs exigeix. L'especificació ARIA in HTML diu què pots posar a cada element. I la guia de patrons explica el teclat de cada component, encara que no sigui una norma.

2:12 Relacions entre elements

Moltes relacions s'expressen apuntant a un altre element pel seu identificador. Així s'associen l'ajuda d'un camp, l'opció activa d'un cercador amb suggeriments, o la posició real en una llista de 1.250 tràmits. Veuràs quines relacions funcionen bé, quines tenen poc suport, i per què els identificadors duplicats les trenquen.

2:35 Amagar, anul·lar i desactivar

Retirar semàntica també té la seva tècnica. Aprendràs quan cal amagar alguna cosa només al lector, i quan a tothom. Veuràs com deixar inutilitzat el fons d'una finestra modal. I sabràs desactivar un botó sense que qui fa servir el teclat es quedi sense saber per què no funciona.

2:54 Anunciar els canvis

Quan apareix un missatge sense moure el focus, com «8 resultats trobats», el lector no se n'assabenta si no l'anuncies. Ho exigeix el criteri 4.1.3, Missatges d'estat. Faràs servir regions d'estat per a gairebé tot, i alertes només per a urgències. Sempre creades buides, abans d'escriure-hi. I llavors sí: «8 resultats trobats.»

3:19 Errors i com detectar-los

Gairebé tots els errors d'ARIA es redueixen a tres. Prometre un comportament que no existeix. Oblidar actualitzar un estat. O posar un atribut on no té efecte. Les eines automàtiques detecten la sintaxi. Per al significat, hauràs d'escoltar cada component amb un lector de pantalla.

3:38 Per què és important

Imagina una veïna que fa servir lector de pantalla, i no pot demanar cita a la seu electrònica perquè els filtres no s'obren. La normativa espanyola, amb el Reial decret 1112 de 2018 i la Llei 11 de 2023, exigeix, a través de la norma EN 301 549, el nivell doble A de les pautes WCAG 2.1. I compte: afegir ARIA sense criteri sol empitjorar les coses.

4:08 En acabar sabràs

En acabar sabràs decidir quan cal fer servir ARIA i quan no. Construiràs components que comuniquen bé el seu rol, el seu nom i el seu estat, i revisaràs els d'altres persones. El curs acaba amb un cas pràctic real, resolt pas a pas. Obre les eines de desenvolupament del teu navegador, i comencem.