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

Nivell 3: Desenvolupament web accessible · Desenvolupament web

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.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 157 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 ocultar contingut de manera visual, de manera accessible o de totes dues maneres, i evitaràs que el CSS trenqui l'ordre de lectura, el reajustament o el contingut generat.
  • Programaràs indicadors de focus robustos, evitaràs que els elements fixos tapin el focus (2.4.11) i faràs que els objectius de punter (2.5.8) i el contingut emergent (1.4.13) compleixin.
  • Adaptaràs la interfície al mode de colors forçats, a prefers-contrast i al mode fosc sense perdre forma, estat, focus ni contrast.
  • Aplicaràs prefers-reduced-motion i compliràs 2.2.2 i 2.3.3 en animacions i contingut en moviment.
  • Escriuràs JavaScript que respecti 2.5.2, 3.2.1, 3.2.2 i 2.2.1 i que mantingui el focus en un lloc lògic quan el contingut apareix o desapareix.
  • Resoldràs en React, Vue i Angular l'encaminament, la gestió del focus, els avisos i els títols de pàgina d'una SPA.
  • Dissenyaràs components reutilitzables i Web Components amb una API que garanteixi nom, funció i semàntica, coneixent els límits del Shadow DOM.
  • Integraràs axe-core, eslint-plugin-jsx-a11y, Lighthouse i proves d'extrem a extrem en el flux de desenvolupament i n'interpretaràs els límits.

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:18 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: CSS accessible: ocultació, contingut generat, reajustament i ordre visual Lectura · 18 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: Els botons d'acció d'una taula de sol·licituds Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Exercici pràctic: Els enllaços «Llegeix-ne més» de la pàgina de notícies d'un ajuntament Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  5. Exercici pràctic: Les targetes de cursos d'un centre municipal d'idiomes Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  6. Exercici pràctic: El formulari de sol·licitud de plaça d'una escola de música Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  7. Lliçó 3: CSS per a la interacció: focus visible, objectius de punter, elements fixos i contingut emergent Lectura · 15 min + test de 3 preguntes · Lectura lliure
  8. Lliçó 4: Preferències de l'usuari en CSS: colors forçats, contrast i mode fosc Lectura · 14 min · infografia + test de 3 preguntes · Lectura lliure
  9. Exercici pràctic: La pantalla de preferències d'una companyia d'aigües en mode de contrast Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  10. Lliçó 5: Moviment i animació: prefers-reduced-motion, 2.2.2 i 2.3.3 Lectura · 16 min + test de 3 preguntes · Lectura lliure
  11. Exercici pràctic: La franja d'avisos en directe del web d'un port Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  12. Lliçó 6: JavaScript accessible: esdeveniments, canvis de context, límits de temps i contingut dinàmic Lectura · 14 min + test de 3 preguntes · Lectura lliure
  13. Exercici pràctic: Els botons «Elimina» de la safata d'un col·legi professional Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  14. Lliçó 7: SPA (React, Vue, Angular): encaminament, focus, avisos i títols Lectura · 20 min · infografia + test de 3 preguntes · Lectura lliure
  15. Exercici pràctic: Els canvis de vista del portal de l'empleat d'una diputació Pàgina real per revisar · dificultat alta · Cal matricular-se
  16. Lliçó 8: Components reutilitzables i Web Components: API accessible, semàntica i Shadow DOM Lectura · 14 min + test de 3 preguntes · Lectura lliure
  17. Exercici pràctic: El component de camp de text del sistema de disseny d'un consorci Pàgina real per revisar · dificultat alta · Cal matricular-se
  18. Lliçó 9: Proves automàtiques en el flux de desenvolupament: axe-core, eslint-plugin-jsx-a11y, Lighthouse i tests e2e Lectura · 16 min + test de 3 preguntes · Lectura lliure
  19. Exercici pràctic: La proposta de proves automàtiques d'una aplicació de reserves 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