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

Nivell 3: Desenvolupament web accessible · Desenvolupament web

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.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 159 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 triar entre botó i enllaç i construir controls personalitzats amb nom, rol, estat i teclat complets.
  • Gestionaràs el focus dels ginys compostos amb roving tabindex o aria-activedescendant i sabràs quan convé cada tècnica.
  • Implementaràs menús, desplegables i pestanyes seguint els patrons de l'APG, amb la gestió de teclat que cadascun exigeix.
  • Construiràs cercadors amb suggeriments segons el patró combobox de WAI-ARIA 1.2, amb el focus al camp i el nombre de resultats anunciat.
  • Construiràs diàlegs modals, acordions i tooltips accessibles, inclosos els requisits d'1.4.13 per al contingut que apareix en passar el punter o enfocar.
  • Faràs accessibles controls lliscants, selectors de quantitat, interruptors i valoracions exposant-ne el nom, el valor actual i els límits.
  • Faràs accessibles carrusels, taules interactives i funcions d'arrossegar i deixar anar complint 2.2.2, 2.5.7 i 2.5.8.
  • Decidiràs quan una estructura ha de ser una taula nativa, un tree, un grid o un treegrid, i n'implementaràs el teclat.

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:17 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: Botons, enllaços i controls personalitzats Lectura · 17 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: La cistella d'una botiga de ceràmica en línia Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Lliçó 3: Ginys compostos: roving tabindex i aria-activedescendant Lectura · 15 min · infografia + test de 3 preguntes · Lectura lliure
  5. Exercici pràctic: La barra de format de l'editor d'un butlletí veïnal Pàgina real per revisar · dificultat alta · Cal matricular-se
  6. Lliçó 4: Menús, desplegables i pestanyes (patrons APG) Lectura · 20 min + test de 3 preguntes · Lectura lliure
  7. Exercici pràctic: Les pestanyes de la fitxa d'un tràmit municipal Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  8. Lliçó 5: Combobox, listbox i autocompletació Lectura · 15 min + test de 3 preguntes · Lectura lliure
  9. Exercici pràctic: El cercador d'estacions d'una companyia ferroviària Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  10. Lliçó 6: Diàlegs modals, acordions i tooltips Lectura · 20 min + test de 3 preguntes · Lectura lliure
  11. Exercici pràctic: L'ampliació del termini d'un expedient en una seu electrònica Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  12. Exercici pràctic: Les ajudes emergents de l'editor de plantilles d'una gestoria Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  13. Lliçó 7: Controls lliscants, interruptors i altres controls de valor Lectura · 13 min · infografia + test de 3 preguntes · Lectura lliure
  14. Exercici pràctic: El selector de quantitat de la cistella d'una botiga de muntanya Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  15. Lliçó 8: Carrusels, taules interactives i arrossegar i deixar anar (2.5.7) Lectura · 17 min + test de 3 preguntes · Lectura lliure
  16. Exercici pràctic: Les notícies destacades de la portada d'un ajuntament Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  17. Exercici pràctic: El tauler de tasques de manteniment d'un centre esportiu Pàgina real per revisar · dificultat alta · Cal matricular-se
  18. Lliçó 9: Vistes en arbre i graelles de dades (tree, grid i treegrid) Lectura · 13 min + test de 3 preguntes · Lectura lliure
  19. Exercici pràctic: L'arbre de carpetes del gestor documental d'un ajuntament 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