Presentació del curs en vídeo

0:00 Teclat i gestió del focus

Hola, et donem la benvinguda a Teclat i gestió del focus, el tercer curs del nivell 3 de la Certificació ADDAW. Aprendràs a construir interfícies que es fan servir completament sense ratolí. Sense tocar-lo ni una sola vegada. És un curs per a desenvolupament, i també per a disseny, QA i auditoria.

0:18 Tot amb teclat, sense paranys

Tot ha de ser assolible, activable i completable amb teclat. Ho diu el criteri 2.1.1. El focus sempre ha de poder sortir d'un component, segons el 2.1.2. I les dreceres d'una sola tecla s'han de poder desactivar, com demana el 2.1.4. Pensa en un correu que arxiva un missatge cada vegada que algú dicta la lletra E. Quin ensurt.

0:45 Com funciona el focus

Després veuràs com gestiona el focus el navegador. Primera sorpresa: enfocable no és el mateix que tabulable. El que s'amaga també ha de sortir de la seqüència de Tab. Si no, apareix el focus fantasma: un menú plegat amb quinze enllaços invisibles. I rebre el focus no ha d'obrir mai finestres ni enviar formularis.

1:06 Ordre i focus visible

El focus s'ha de moure en un ordre lògic, i veure's sempre. Ordenaràs el codi tal com es llegeix, i faràs servir tabindex només amb 0 i menys 1. Dibuixaràs un indicador amb focus-visible, amb un contrast de 3 a 1 respecte al que l'envolta. I comprovaràs que cap capçalera fixa el tapa.

1:26 Components compostos

En una barra d'eines o en un calendari, Tab entra i surt del component, i les fletxes es mouen a dins. Ho implementaràs amb roving tabindex, que mou el focus real. Per a un combobox amb camp de text faràs servir aria-activedescendant. Així, un calendari de 31 dies deixa de ser 31 parades i passa a ser-ne una de sola.

1:50 Esdeveniments i dreceres pròpies

Programaràs esdeveniments de teclat amb keydown i la propietat key. I coneixeràs els paranys del teclat espanyol: a Windows, AltGr arriba com a Control més Alt. Així, una drecera amb Control, Alt i E es dispararia just en escriure el símbol de l'euro. Curiós, oi? I aprendràs a no disparar mai una drecera mentre algú escriu.

2:12 El focus en contingut dinàmic

Quan JavaScript canvia la pantalla, el focus no es mou sol: tu decideixes on és. Afegiràs enllaços de salt. Construiràs finestres modals que mouen el focus a dins, el retenen, es tanquen amb Escapada i el retornen. I a cada canvi de vista actualitzaràs el títol i portaràs el focus a l'encapçalament principal.

2:33 Teclat i tecnologies de suport

Veuràs com fan servir el teclat les tecnologies de suport. En mode d'exploració, el lector de pantalla intercepta les tecles i activa els controls amb un clic. Per això, l'activació va sempre a l'esdeveniment click, i no a les tecles. I per al control per veu, el nom accessible ha de contenir el text visible: qui diu «prem Continua» espera que funcioni.

2:57 Un protocol de prova

Acabaràs amb un protocol de prova amb teclat. Completaràs tasques reals sense ratolí i registraràs cada troballa de manera reproduïble, amb el seu criteri i la seva gravetat. L'aplicaràs a un cas complet: la cita prèvia d'una seu electrònica. Són uns 10 minuts per pàgina. Poc temps, per tot el que descobreix.

3:18 Per què importa

Pensa en la Lucía, que fa anar l'ordinador amb un commutador. Cada parada sobrera li costa segons, i un parany la deixa fora. Els criteris de teclat són a la norma EN 301 549, que el Reial decret 1112 de 2018 exigeix al sector públic. I la Llei 11 de 2023 porta l'accessibilitat a la banca o al comerç electrònic. Ningú no s'hauria de quedar a mitges per culpa d'una tecla.

3:48 En acabar sabràs…

En acabar sabràs fer operable amb teclat qualsevol interfície, i gestionar el focus a cada canvi de pantalla. També sabràs provar-ho i documentar-ho amb un mètode que qualsevol equip pot repetir. Així que aparta el ratolí, i comença per la primera lliçó.