Addaw, anar a la pàgina d'inici Donar

Nivell 3: Desenvolupament web accessible · Desenvolupament web

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ú.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 120 minuts
  • 10 exercicis pràctics
  • Test de pràctica il·limitat

Contingut revisat el 26/10/2026 · Historial d'actualitzacions · Com s'elabora i s'avalua

Objectius

  • En acabar sabràs associar etiquetes, instruccions i ajudes a cada camp amb label, fieldset, legend i aria-describedby.
  • Implementaràs validació i missatges d'error d'acord amb el 3.3.1, el 3.3.2 i el 3.3.3 fent servir aria-invalid, aria-describedby i regions actives.
  • Aplicaràs autocomplete per complir l'1.3.5 Identificar el propòsit de l'entrada i evitaràs demanar dades repetides d'acord amb el 3.3.7 Entrada redundant.
  • Dissenyaràs processos d'autenticació que compleixin el 3.3.8 i resoldràs CAPTCHA, selects personalitzats i selectors de data sense barreres.
  • Comprendràs com calcula el navegador el nom accessible d'un camp i aplicaràs el 2.5.3 Etiqueta en el nom perquè funcioni amb lector de pantalla i control per veu.
  • Implementaràs en CSS vores, estats i focus amb contrast suficient (1.4.11, 2.4.7) que resisteixin el zoom, el reajustament i el mode de colors forçats.
  • Construiràs caselles, interruptors, camps de fitxer, controls lliscants i comptadors accessibles partint dels controls natius.
  • Dissenyaràs processos en diversos passos amb indicador de progrés, gestió del focus, límits de temps ajustables (2.2.1) i sense canvis de context inesperats (3.2.2).

El curs, pas a pas

El curs és guiat: després de cada lliçó fas un test curt i, quan toca, un o diversos exercicis pràctics amb una pàgina real per revisar. Quan els superes, s'obre el pas següent.

Totes les lliçons es poden llegir lliurement. Per fer els tests i els exercicis pràctics, desar el teu progrés i optar a l'examen i al certificat, matricula't.

0 de 20 passos completats
  1. Lliçó 1: Presentació del curs en vídeo Vídeo · 4:04 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: Etiquetes, agrupació i instruccions Lectura · 10 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: El formulari «Demana informació» d'una acadèmia d'idiomes Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Exercici pràctic: L'elecció del canal de notificació en una seu electrònica Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  5. Lliçó 3: Com s'anuncia un camp: nom accessible, estats i 2.5.3 Etiqueta en el nom Lectura · 14 min · infografia + test de 3 preguntes · Lectura lliure
  6. Exercici pràctic: L'alta al servei de bicicleta pública, revisada a l'inspector Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  7. Lliçó 4: Validació i missatges d'error Lectura · 9 min + test de 3 preguntes · Lectura lliure
  8. Exercici pràctic: La inscripció en una cursa popular quan alguna cosa va malament Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  9. Exercici pràctic: Els missatges d'error d'una comunicació d'obra menor Pàgina real per revisar · dificultat alta · Cal matricular-se
  10. Lliçó 5: autocomplete, propòsit de l'entrada (1.3.5) i entrada redundant (3.3.7) Lectura · 10 min + test de 3 preguntes · Lectura lliure
  11. Exercici pràctic: Les dades personals del carnet d'una xarxa de biblioteques Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  12. Exercici pràctic: La compra en quatre passos d'una botiga de llavors Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  13. Lliçó 6: Estats visibles en CSS: contrast, focus, colors forçats i reajustament Lectura · 12 min + test de 3 preguntes · Lectura lliure
  14. Exercici pràctic: Les caselles amb estil propi d'un diari digital Pàgina real per revisar · dificultat alta · Cal matricular-se
  15. Lliçó 7: Caselles, interruptors, fitxers i altres controls especials Lectura · 12 min + test de 3 preguntes · Lectura lliure
  16. Lliçó 8: Autenticació accessible (3.3.8), CAPTCHA, selects i selectors de data Lectura · 11 min + test de 3 preguntes · Lectura lliure
  17. Exercici pràctic: L'accés a la banca en línia d'una caixa comarcal Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  18. Lliçó 9: Processos en diversos passos: progrés, temps límit (2.2.1) i canvis de context (3.2.2) Lectura · 13 min · infografia + test de 3 preguntes · Lectura lliure
  19. Exercici pràctic: La cita prèvia d'una oficina d'ocupació Pàgina real per revisar · dificultat alta · Cal matricular-se
  20. Lliçó 10: Cas pràctic, exercicis i llista de comprovació Cas pràctic · 25 min + test de 3 preguntes · Lectura lliure