Presentació del curs en vídeo

0:00 Disseny d'interfícies accessibles

Et donem la benvinguda a Disseny d'interfícies accessibles, el quart curs del nivell 2 de la certificació d'ADDAW. Moltes barreres es decideixen en el disseny, abans del codi. Són decisions que obren o tanquen portes. El curs és per a disseny, producte, desenvolupament i auditoria.

0:19 Layout coherent i responsive

Comencem per la base. Una interfície predictible manté el mateix ordre i els mateixos noms a tot el lloc web. L'ajuda és sempre al mateix lloc, també durant el pagament. I el disseny funciona a 320 píxels d'amplada i en qualsevol orientació, perquè així el fan servir moltes persones amb zoom.

0:38 Saber sempre on ets

Després, l'orientació. Els títols de pàgina posen primer el que és específic. Els encapçalaments descriuen el seu bloc. Un enllaç per saltar al contingut estalvia quaranta pulsacions de teclat. Quaranta, a cada pàgina. I sempre hi ha més d'una via per arribar a cada pàgina, com el menú i el cercador.

1:00 Botó o enllaç, i tots els seus estats

Cada component comença amb una decisió. Un enllaç porta a un altre lloc. Un botó fa alguna cosa a la pàgina. Els seus estats, com seleccionat o amb error, no depenen només del color. I les ajudes emergents es poden tancar amb la tecla Escape, i no s'esvaeixen quan intentes llegir-les.

1:21 El focus s'ha de veure

Qui navega amb el teclat necessita saber on és. Per això cada component té un estat de focus dissenyat, diferent del que apareix en passar-hi el ratolí. I aquest focus no queda mai tapat per capçaleres fixes, bàners de galetes ni botons de xat.

1:38 Objectius que s'encerten i gestos simples

Per encertar amb el dit, o amb tremolor, cada objectiu fa com a mínim 24 per 24 píxels. Millor 44 als controls principals. I tot el que es fa arrossegant o lliscant té una alternativa de pulsació simple. Per exemple, uns botons de pujar i baixar, o un menú «Mou a».

2:00 Formularis que ajuden

Els formularis són on l'accessibilitat es torna un dret: demanar un ajut, una cita, una plaça. Les etiquetes són visibles: mai només el text gris del placeholder. Els errors s'expliquen en text, amb com corregir-los. I no es demana dues vegades la mateixa dada. A més, en iniciar sessió no hi ha exàmens de memòria: es pot enganxar la contrasenya.

2:24 Moviment i temps sota control

La persona controla el ritme. El que es mou sol, com un carrusel, es pot posar en pausa. Abans que caduqui la sessió hi ha un avís, amb almenys 20 segons per ampliar-la. I els missatges com «Producte afegit» s'anuncien al lector de pantalla sense robar el focus: «Producte afegit al carretó.»

2:44 Validar abans de lliurar

Abans de lliurar, el disseny passa sis proves d'estrès, com un cotxe abans de sortir a la carretera. El veus a 320 píxels, amb el text ampliat i sense color. Fas el recorregut de teclat, i una lectura lineal, com un lector de pantalla. I dibuixes els estats buits, d'error i de càrrega, que són els que més s'obliden.

3:07 Anotar per a desenvolupament

El que no s'anota, no es construeix. Així de senzill. A Figma anotes els encapçalaments, l'ordre de focus i el nom exacte de cada botó d'icona. També els estats, les tecles que fan funcionar cada component i els anuncis dinàmics. I cada nota es converteix en un criteri d'acceptació comprovable.

3:30 Per què importa

Pensa en una persona gran, amb baixa visió, que vol demanar cita sense ajuda de ningú. A més, és obligatori: el Reial decret 1112 de 2018 ho exigeix al sector públic, i la Llei 11 de 2023, a molts serveis privats. I corregir en el disseny costa minuts. Després del desenvolupament, setmanes.

3:54 En acabar sabràs

En acabar, sabràs dissenyar pantalles predictibles i orientadores. Sabràs especificar components, estats i formularis. I sabràs validar i anotar els teus dissenys perquè arribin bé al codi. Comença per la primera lliçó, amb un projecte propi a mà.