Presentació del curs en vídeo

0:00 Components interactius accessibles

Hola, i et donem la benvinguda a Components interactius accessibles, un curs del nivell 3 de la certificació d'ADDAW, el del desenvolupament web accessible. Treballarem amb els patrons de l'APG, la guia que publica el W3C. És un curs per a qui desenvolupa, dissenya o audita interfícies. I també per a qui encarrega aplicacions web.

0:22 Botó o enllaç: la primera decisió

Tot comença amb una decisió senzilla que es pren malament cada dia. L'enllaç et porta a un altre lloc. El botó fa alguna cosa a la pàgina. Mira aquest «Mostra el carretó» fet amb un enllaç buit. Prems la barra espaiadora i… res de res. Amb un botó de debò, respon a la primera. I cada nom s'ha d'entendre fora de context. Res de deu «Llegeix-ne més» iguals.

0:47 Una parada de tabulador, moltes fletxes

Les barres d'eines, les pestanyes, les llistes i els arbres segueixen la mateixa regla. El tabulador salta d'un component a un altre. I un cop a dins, et mous amb les fletxes. Hi ha dues tècniques que ho fan possible, i les veuràs totes dues. Amb roving tabindex, el focus es mou de debò d'un element a un altre. Amb l'atribut aria-activedescendant, en canvi, el focus es queda quiet al seu lloc.

1:11 Menús i pestanyes

Amb els menús hi ha molta confusió. La navegació principal d'un web no és un menú d'aplicació. És una llista d'enllaços, amb botons que despleguen els submenús. El menú d'accions, com «Més opcions», és una altra cosa: es recorre amb les fletxes i es tanca amb Escape. I les pestanyes mostren un sol panell cada vegada, amb la pestanya activa sempre marcada.

1:35 Cercadors amb suggeriments

El cercador d'estacions d'un web de transport és un combobox. Mentre escrius, el focus es queda al camp. Les fletxes ressalten un suggeriment, i Retorn l'accepta. I una regió d'estat anuncia quants resultats hi ha, perquè qui no veu la llista sàpiga que existeix. Escolta: «3 resultats disponibles.»

1:56 Diàlegs, acordions i tooltips

Aquests tres components tenen una cosa en comú: mostren i amaguen contingut. El diàleg modal rep el focus a dins, es tanca amb Escape i retorna el focus al seu origen, el botó que l'ha obert. L'acordió no té misteri: és un encapçalament amb un botó. I el tooltip ha de ser descartable, accessible amb el punter i persistent, com exigeix el criteri 1.4.13 de les pautes WCAG.

2:23 Controls de valor

El filtre de preu, el selector de quantitat de la cistella o l'interruptor d'avisos del banc tenen una cosa en comú: serveixen per fixar un valor. Els controls lliscants i els selectors de quantitat exposen el seu valor actual, el seu mínim i el seu màxim. Els interruptors tenen un nom fix i anuncien si estan activats o desactivats. Així sona un de ben fet: «Avisos, interruptor, activat.»

2:50 Carrusels, taules i arrossegar

Si un carrusel es mou durant més de 5 segons, necessita un control de pausa. En una taula amb vint botons «Edita», cada acció de fila necessita el seu propi nom. I tot el que s'arrossega, com les targetes d'un tauler, necessita una alternativa sense arrossegament, segons el criteri 2.5.7.

3:11 Arbres i graelles de dades

Les aplicacions de gestió hi afegeixen dues estructures exigents. L'arbre de carpetes s'obre i es tanca amb les fletxes, com a l'explorador de fitxers. La graella permet treballar cel·la a cel·la, com en un full de càlcul. Però compte: si les dades només es llegeixen, el correcte és una taula normal.

3:32 Per què és important

Darrere de cada component hi ha persones reals. Qui navega només amb teclat per una lesió. O qui fa servir un lector de pantalla per pagar un rebut. Des del 28 de juny de 2025, la Llei 11 de 2023 exigeix accessibilitat al comerç electrònic i a la banca. I de propina: un component ben fet té menys codi i menys errors.

3:55 El que sabràs fer

En acabar sabràs triar el patró adequat. O, millor encara, l'HTML natiu que ho fa per tu. Implementaràs el teclat complet de cada component i el provaràs amb teclat i amb lector de pantalla. I al final t'espera un cas pràctic amb una botiga en línia. Comencem!