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

Nivell 2: Continguts i disseny accessibles · Disseny i continguts

N2-C4 Disseny d'interfícies accessibles

Moltes barreres d'accessibilitat es decideixen abans d'escriure una línia de codi: en el disseny. Aquest curs ensenya a dissenyar interfícies coherents, orientadores i responsive; a decidir què és cada component i dibuixar-ne tots els estats; a tenir cura del focus, la mida dels objectius, els gestos, el moviment i els límits de temps; i a dissenyar formularis que no generin errors. Acaba amb un mètode per validar els dissenys abans de lliurar-los i anotar-los a Figma perquè desenvolupament tingui tot el que necessita.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 124 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 dissenyar layouts coherents entre pàgines, amb la navegació i l'ajuda en posicions predictibles, i que funcionen en qualsevol mida i orientació.
  • En acabar sabràs dissenyar l'orientació d'un lloc web: patró de títols, encapçalaments descriptius, enllaç per saltar al contingut, diverses vies d'accés i indicadors de pas (2.4.1, 2.4.2, 2.4.5, 2.4.6).
  • Decidiràs si cada element és un botó o un enllaç, en dissenyaràs tots els estats sense dependre del color i especificaràs el contingut emergent d'acord amb 1.4.13.
  • Podràs dissenyar estats de focus visibles, objectius tàctils d'almenys 24 per 24 píxels i alternatives a gestos complexos i arrossegaments.
  • Sabràs dissenyar formularis amb etiquetes visibles, instruccions, missatges d'error útils, sense demanar dades repetides i amb autenticació accessible.
  • Controlaràs en el disseny el moviment, les llampades, els límits de temps i els missatges dinàmics (2.2.1, 2.2.2, 2.3.1, 4.1.3).
  • Validaràs un disseny amb sis proves d'estrès (320 px, text ampliat, sense color, recorregut de teclat, lectura lineal i estats oblidats) i sabràs quan cal provar amb persones usuàries.
  • Podràs produir anotacions d'accessibilitat a Figma (encapçalaments, ordre de focus, noms, estats, alt) com a lliurable per a desenvolupament.

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:12 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: Layout, coherència (3.2.3, 3.2.4, 3.2.6) i disseny responsive Lectura · 10 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: Dues pantalles del prototip d'un centre cultural Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Lliçó 3: Navegació i orientació: títols, encapçalaments, salts i múltiples vies (2.4.1, 2.4.2, 2.4.5, 2.4.6) Lectura · 14 min · infografia + test de 3 preguntes · Lectura lliure
  5. Exercici pràctic: Una seu electrònica amb un menú de dotze seccions Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  6. Lliçó 4: Components i estats: botó o enllaç, estats sense color i contingut emergent (1.4.13) Lectura · 14 min + test de 3 preguntes · Lectura lliure
  7. Exercici pràctic: L'ajuda emergent del camp IBAN d'una cooperativa elèctrica Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  8. Lliçó 5: Focus visible i no ocult (2.4.7, 2.4.11), mida de l'objectiu (2.5.8) i gestos (2.5.1, 2.5.7) Lectura · 10 min + test de 3 preguntes · Lectura lliure
  9. Exercici pràctic: La borsa de treball municipal recorreguda només amb el teclat Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  10. Exercici pràctic: La paginació del catàleg d'una xarxa de biblioteques Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  11. Exercici pràctic: El filtre de preu d'un portal de lloguer Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  12. Lliçó 6: Dissenyar formularis: etiquetes, ajudes i errors (de 3.3.1 a 3.3.8) Lectura · 10 min + test de 3 preguntes · Lectura lliure
  13. Exercici pràctic: L'inici de sessió de l'àrea privada d'una mutualitat Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  14. Exercici pràctic: La inscripció a les escoles esportives d'un ajuntament Pàgina real per revisar · dificultat alta · Cal matricular-se
  15. Lliçó 7: Moviment, temps i contingut dinàmic (2.2.1, 2.2.2, 2.3.1, 4.1.3) Lectura · 14 min + test de 3 preguntes · Lectura lliure
  16. Lliçó 8: Revisar i validar el disseny abans de lliurar-lo: proves d'estrès i persones usuàries Lectura · 13 min · infografia + test de 3 preguntes · Lectura lliure
  17. Exercici pràctic: La revista digital d'una cooperativa agrària amb el seu avís de galetes Pàgina real per revisar · dificultat alta · Cal matricular-se
  18. Lliçó 9: Anotar l'accessibilitat en els dissenys (Figma): lliurables per a desenvolupament Lectura · 9 min + test de 3 preguntes · Lectura lliure
  19. Exercici pràctic: El full d'anotacions d'una targeta de producte 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