Nivell 3 de 7 · ACA-3 Gratis
Desenvolupament web accessible
HTML semàntic, formularis, teclat, ARIA i components que funcionen amb tecnologies de suport.
- 6 cursos
- 60 lliçons
- 60 exercicis pràctics
- 30 preguntes i 3 casos pràctics a l'examen
- 60 minuts
- Nota mínima 70 %
Què aprendràs
El nivell tècnic per a qui construeix el web: estructura semàntica, formularis accessibles, teclat i gestió del focus, WAI-ARIA ben utilitzat, patrons de components (menús, finestres modals, pestanyes) i accessibilitat en CSS, JavaScript i frameworks moderns, amb proves automàtiques integrades en el desenvolupament.
Per a qui és: Desenvolupadors front-end i full-stack, maquetadors, QA.
Cursos del nivell
-
N3-C1
HTML semàntic i estructura
L'HTML és la capa on es guanya o es perd la major part de l'accessibilitat. Aquest curs explica com el navegador construeix l'arbre d'accessibilitat i calcula el nom accessible, i com estructurar pàgines amb landmarks, encapçalaments, llistes, semàntica del text i taules que qualsevol tecnologia de suport entengui. Després ho aplica a plantilles reals, a l'orientació dins del lloc web, al títol, l'idioma i l'ordre del codi, i als errors de marcatge que trenquen l'accessibilitat en silenci.
-
N3-C2
Formularis accessibles
Els formularis són el punt on un web deixa d'informar i comença a prestar servei (una sol·licitud, una compra, un registre) i també on més persones es queden fora. Aquest curs ensenya a etiquetar, agrupar i explicar els camps, a entendre el que anuncia un lector de pantalla, a validar i comunicar errors i a aprofitar autocomplete. També a construir controls, autenticacions, CAPTCHA, selectors i processos de diversos passos que no excloguin ningú.
-
N3-C3
Teclat i gestió del focus
Si una interfície funciona amb teclat, funciona amb lectors de pantalla, amb commutadors, amb control per veu i amb la majoria de les tecnologies de suport. Aquest curs cobreix l'operabilitat completa amb teclat, el model de focus del navegador, l'ordre i la visibilitat del focus, la navegació amb fletxes en components compostos, els esdeveniments i les dreceres de teclat, la gestió del focus en finestres modals i aplicacions d'una sola pàgina, i un protocol de prova que pots aplicar a qualsevol pàgina en deu minuts.
-
N3-C4
WAI-ARIA: fonaments
WAI-ARIA és el vocabulari que permet descriure a les tecnologies de suport allò que l'HTML per si sol no pot expressar: ben utilitzat, fa accessibles components complexos; mal utilitzat, trenca el que funcionava. Aquest curs explica les cinc regles d'ús, el camí del codi al lector de pantalla, rols, estats, propietats i relacions, com llegir l'especificació i l'APG, com amagar i desactivar correctament i com anunciar canvis amb regions actives. Acaba amb els errors més repetits, com detectar-los i un cas pràctic resolt.
-
N3-C5
Components interactius accessibles
Les interfícies es construeixen amb un grapat de components que es repeteixen a tot arreu i, si aquests són accessibles, gairebé tota l'aplicació ho és. Aquest curs els recorre un per un amb el seu patró de referència a l'ARIA Authoring Practices Guide (APG): botons i enllaços, ginys compostos, menús i pestanyes, combobox, diàlegs, controls de valor, carrusels, taules, arbres i graelles. Per a cada component veuràs l'HTML que l'implementa, el teclat que ha d'admetre, els criteris WCAG 2.2 que l'afecten i els errors que més es repeteixen.
Mira el curs i matricula-t'hi: Components interactius accessibles
-
N3-C6
CSS, JavaScript i frameworks
L'accessibilitat no s'acaba en l'HTML. El CSS decideix què es veu, com es mostra el focus i com s'adapta la pàgina a les preferències de cada persona; el JavaScript decideix què canvia i quan; i els frameworks reescriuen la pàgina sense recarregar-la. Aquest curs ensenya a programar tot això de manera accessible en CSS, JavaScript, React, Vue, Angular i Web Components, i a integrar proves automàtiques perquè els errors no tornin.