Presentació del curs en vídeo

0:00 Formularis accessibles

Hola, et donem la benvinguda a Formularis accessibles, el segon curs del nivell 3 de la Certificació ADDAW. Un formulari és el lloc on un web deixa d'informar i comença a prestar servei. Aprendràs a fer-lo accessible, del camp solt al procés complet. És un curs per a desenvolupament, disseny i auditoria.

0:21 Etiquetes, grups i ajudes

Comencem per la base. Cada camp necessita la seva etiqueta visible, associada al codi. I el text d'exemple no serveix com a etiqueta: desapareix tan bon punt comences a escriure. Les preguntes amb diverses opcions s'agrupen amb fieldset i legend. I els formats, com el de l'IBAN, es mostren abans del camp i s'associen amb aria-describedby.

0:43 El que sent un lector de pantalla

Després canviaràs de paper: escoltaràs el formulari com ho fa un lector de pantalla. Sentiràs el rol, el nom, els estats i la descripció de cada camp: «Correu electrònic, edició, obligatori. T'enviarem el justificant.» El nom surt d'una sola font, en un ordre fix. I el que es veu ha de ser el que es diu, perquè amb control per veu la persona pronuncia el text del botó.

1:11 Errors que s'entenen

Un error marcat només en vermell és una paret. Si no distingeixes aquest color, no saps què ha fallat. Aprendràs a escriure l'error en text, al costat del camp, amb un suggeriment per corregir-lo. Quan n'hi ha diversos, un resum enllaçat rep el focus. I abans de pagar o signar, la persona ha de poder revisar el que envia.

1:32 Emplenar menys, equivocar-se menys

Emplenar un formulari costa. Sobretot amb dificultats de memòria, o des d'un mòbil. Amb l'atribut autocomplete i els seus valors oficials, el navegador emplena les dades personals. I el criteri 3.3.7 prohibeix demanar dues vegades la mateixa dada. Per exemple, l'adreça de facturació, quan ja has donat la d'enviament.

1:56 Que el formulari es vegi

També importa, i molt, el que es veu. Les vores dels camps i els seus estats necessiten un contrast mínim de 3 a 1. El focus s'ha de veure sempre, i no ha de quedar tapat per barres fixes. I el formulari ha de funcionar amb zoom al 400 per cent i en el mode de contrast de Windows.

2:15 Caselles, interruptors i fitxers

Després passaràs als controls especials. Donaràs un estil propi a caselles i botons d'opció, sense perdre el control natiu. Faràs servir el rol switch als interruptors d'efecte immediat. I faràs que adjuntar un document funcioni amb un botó, no només arrossegant el fitxer.

2:32 Accés, CAPTCHA, selects i dates

Alguns components concentren moltes barreres. Anem pels més delicats. Iniciar sessió no ha d'exigir proves de memòria: cal permetre enganxar i fer servir gestors de contrasenyes. Els CAPTCHA invisibles substitueixen les endevinalles. I el select natiu i les dates que es poden escriure guanyen gairebé sempre els components fets a mida.

2:55 Processos en diversos passos

Molts tràmits tenen diversos passos. Indicaràs el pas, per exemple «pas 2 de 4», al títol i a la pantalla. Avisaràs abans que caduqui la sessió, i donaràs almenys 20 segons per ampliar-la. I triar una opció en una llista no canviarà mai de pàgina sense avisar.

3:14 Per què importa

Pensa en una persona cega que demana una ajuda al seu ajuntament. Si el formulari falla, no ho pot fer sola. El Reial decret 1112 de 2018 obliga el sector públic. I la Llei 11 de 2023 arriba al comerç electrònic i a la banca des del 28 de juny de 2025. A més, un formulari accessible redueix l'abandonament de tothom.

3:42 En acabar el curs

En acabar sabràs construir formularis que tothom pot completar. Els comprovaràs amb teclat, lector de pantalla i zoom, i en corregiràs les errades més comunes. T'enduràs un cas pràctic resolt i una llista de comprovació per a la teva feina diària. Obre un formulari que coneguis, el que sigui, i comencem.