Presentació del curs en vídeo

0:00 Et donem la benvinguda

Hola, i benvinguda a CSS, JavaScript i frameworks, un curs del nivell 3 de la certificació d'accessibilitat digital d'ADDAW, el del desenvolupament web accessible. Està pensat per a qui programa interfícies. I ve a explicar-te una cosa important: l'accessibilitat no s'acaba en l'HTML. També es guanya o es perd en els fulls d'estil, en els scripts i en els frameworks.

0:27 Ocultar i ordenar amb CSS

Comencem pel CSS que oculta i reordena. Amb display none, el contingut desapareix per a tothom. La classe visually hidden, en canvi, l'oculta només a la vista i conserva el text per al lector de pantalla. I compte si canvies l'ordre visual amb order o amb Grid: el teclat seguirà l'ordre del codi. Per això es reordena en el codi, no en el full d'estils.

0:53 Un focus visible i mai tapat

Després arriba el CSS de la interacció. Un contorn a focus visible, amb bon contrast, marca on és el focus. Amb scroll padding evites que una capçalera fixa el tapi, com exigeix el criteri 2.4.11. I els botons han de fer com a mínim 24 per 24 píxels, o tenir prou espai al seu voltant.

1:16 Respecta les preferències

Moltes persones ajusten el seu sistema per veure-hi millor. Amb un tema de contrast de Windows desapareixen les ombres i els fons de color. I un botó sense vora es converteix en text solt. Aprendràs a fer servir vores transparents i colors del sistema, a donar més contrast quan es demana i a crear un mode fosc amb el mateix contrast.

1:38 Moviment sota control

Les animacions poden provocar marejos a les persones amb trastorns vestibulars. Per això les definiràs respectant la preferència del sistema de reduir el moviment. Tot el que es mogui sol durant més de 5 segons, com un vídeo de fons, necessita un botó de pausa. I res no pot fer flaixos més de 3 vegades per segon per sobre dels llindars del criteri 2.3.1.

2:03 JavaScript que no sorprèn

El JavaScript decideix què passa i quan. Les accions es programen amb click, que es dispara en deixar anar i també amb el teclat. Un desplegable no t'ha de canviar de pàgina només per triar una opció. I si la sessió d'una seu electrònica caduca, ha d'avisar abans i deixar allargar-la amb un sol botó.

2:23 Aplicacions d'una sola pàgina

En les aplicacions d'una sola pàgina, fetes amb React, Vue o Angular, el navegador ja no fa la seva feina en cada càrrega. Així que et toca a tu: posar un títol nou en cada ruta, moure el focus a l'encapçalament principal, tornar a dalt i anunciar que la vista ha canviat. En canviar de vista, el lector de pantalla ho diu clar: «Les meves comandes, encapçalament nivell 1.» I veuràs com fer-ho en cada framework.

2:52 Components que no s'obliden de res

Un component reutilitzable multiplica el que conté. Per a bé… o per a mal. Aprendràs a fer obligatòria l'etiqueta a la seva API i a portar els atributs al control real. En els Web Components embolcallaràs elements natius. I sabràs per què les referències per id no travessen el Shadow DOM.

3:14 Proves automàtiques en el teu flux

S'estima que les eines automàtiques detecten al voltant d'un terç dels problemes, segons l'estudi i el lloc. No són tots, però sí els més repetitius. Integraràs un linter en escriure, i el motor axe en les proves de components i d'extrem a extrem. I fixaràs un llindar d'errors que no pugui créixer mai.

3:34 Per què és important

I això no és opcional. El Reial decret 1112 de 2018 obliga el sector públic. I la Llei 11 de 2023 arriba, des del 28 de juny de 2025, a serveis privats com el comerç electrònic i la banca. Però pensa, sobretot, en les persones que fan servir el teu web avui.

3:55 En acabar el curs

En acabar, revisaràs amb criteri el CSS i el JavaScript de qualsevol projecte. Corregiràs aplicacions d'una sola pàgina i components, i evitaràs amb proves que els errors tornin. Tingues a mà un projecte propi i les eines de desenvolupament del navegador. Cada exercici et portarà pocs minuts. Comencem!