Presentació del curs en vídeo

0:00 Et donem la benvinguda

Hola, et donem la benvinguda a HTML semàntic i estructura, el primer curs del nivell 3 de la Certificació ADDAW d'Accessibilitat Digital. L'HTML és la base de l'accessibilitat. Aquí es guanya o es perd gairebé tot. El curs està pensat per a qui es dedica al desenvolupament, la maquetació o l'auditoria.

0:19 El que no es veu: l'arbre d'accessibilitat

Hi ha una cosa que no es veu. A partir de l'HTML, el navegador construeix un arbre paral·lel que llegeixen les tecnologies de suport. En aquest arbre, cada element té rol, nom, estat i valor. Per això un div amb aspecte de botó no és un botó. No rep el focus ni s'anuncia com una cosa que es pot prémer.

0:42 El nom accessible

El nom accessible és el que anuncia el lector de pantalla. I el que necessita el control per veu per trobar un botó. Veuràs com el calcula el navegador. L'exemple típic és un botó de tancar només amb una icona. Sense text ni etiqueta, s'anuncia així: «Botó.» Botó, i prou. Amb un nom, en canvi: «Tanca, botó.»

1:07 Landmarks, encapçalaments i llistes

Després construiràs el mapa de la pàgina. Les regions permeten saltar de zona en zona. Els encapçalaments funcionen com l'índex d'un llibre. I les llistes diuen quants elements hi ha. Per exemple, dos menús de navegació amb noms diferents: Principal i Passos del tràmit.

1:26 El significat del text

El text també té semàntica: cites, sigles, dates i figures. Però, amb la configuració habitual, els lectors de pantalla no anuncien la negreta ni el ratllat. Així, un preu rebaixat es pot sentir així: «30 euros, 20 euros.» Puja o baixa? L'imprescindible ha de ser també en paraules. «Abans, 30 euros. Ara, 20 euros.»

1:54 Taules de dades que s'entenen

En una taula de dades, cada cel·la depèn de la seva fila i de la seva columna. Aprendràs a donar-li un títol amb caption i a marcar els encapçalaments de fila i de columna. Així, en una taula de taxes municipals, cada import s'anuncia amb el seu tràmit i el seu tipus de taxa. «Llicència d'obra, Urgent, 90 euros.»

2:15 Plantilles de pàgines reals

Portaràs tot això a plantilles reals: portades, llistats, fitxes i articles. Veuràs com marcar targetes amb el seu propi encapçalament i un enllaç clar. Sense deu enllaços de «llegeix-ne més». I per què cada iframe, com el mapa d'una oficina, necessita un títol que digui què conté.

2:34 Saber on ets

També aprendràs a orientar la persona dins del lloc web. Marcaràs els fils d'Ariadna i la pàgina actual, i una paginació amb nom. I oferiràs un cercador o un mapa web, perquè les pautes WCAG demanen almenys dues vies per arribar a cada pàgina.

2:51 Títol, idioma i ordre del codi

Hi ha detalls petits que generen moltes reclamacions. Cada pàgina necessita un títol únic. El document ha de declarar el seu idioma real, o el català es llegirà amb veu anglesa. I l'ordre del codi mana: si el preu va darrere del botó de compra, se sentirà després.

3:10 HTML robust

Acabaràs amb els errors de marcatge que trenquen l'accessibilitat en silenci. Un identificador duplicat deixa un camp sense etiqueta. Un botó dins d'un enllaç confon els lectors de pantalla. I aprendràs a validar el codi i a confirmar el resultat a l'arbre d'accessibilitat.

3:30 Per què importa

Pensa en una persona cega que navega per encapçalaments per buscar les taxes d'una llicència. Si la pàgina no en té, o la taula està mal marcada, no les trobarà. A més, l'estructura és la base per complir el Reial decret 1112 de 2018. I també la Llei 11 de 2023, que ja s'aplica a moltes empreses privades.

3:54 En acabar el curs

En acabar, sabràs estructurar qualsevol plantilla amb un HTML que tothom entén. I sabràs comprovar-ho amb l'arbre d'accessibilitat i amb un lector de pantalla. Tindràs una base sòlida per a la resta del nivell: formularis, teclat, ARIA i components. Comencem?