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

Nivell 3: Desenvolupament web accessible · Desenvolupament web

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.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 127 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 què és WAI-ARIA 1.2, què aporta i què no, i aplicaràs les cinc regles d'ús d'ARIA.
  • Explicar com arriba la informació del DOM al lector de pantalla a través de l'arbre d'accessibilitat i les API de la plataforma, i com hi influeixen els modes del lector.
  • Distingiràs rols, estats i propietats, i construiràs noms i descripcions accessibles conformes a 4.1.2.
  • Consultar la fitxa d'un rol a WAI-ARIA 1.2, les regles d'ARIA in HTML i els patrons de l'APG per decidir quins atributs cal fer servir.
  • Expressar relacions entre elements amb referències per id (aria-describedby, aria-activedescendant, aria-setsize…) coneixent-ne el suport real.
  • Triar el mecanisme adequat entre hidden, aria-hidden, inert, role="none", disabled i aria-disabled.
  • Implementaràs regions actives amb aria-live, role="status" i role="alert" per complir 4.1.3 Missatges d'estat.
  • Reconeixeràs els errors habituals d'ARIA (rols redundants, atributs no vàlids, aria-hidden en elements enfocables) i els detectaràs amb eines i amb lector de pantalla.

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:29 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: Què és ARIA, les cinc regles i «cap ARIA és millor que un mal ARIA» Lectura · 10 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: Els rebuts de l'àrea de clients d'una companyia d'aigües Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Lliçó 3: Del codi al lector: arbre d'accessibilitat, API i modes del lector Lectura · 15 min · infografia + test de 3 preguntes · Lectura lliure
  5. Lliçó 4: Rols, estats i propietats; nom i descripció accessibles (4.1.2) Lectura · 10 min + test de 3 preguntes · Lectura lliure
  6. Exercici pràctic: El reproductor del pòdcast d'una ràdio municipal Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  7. Lliçó 5: Llegir l'especificació: la fitxa de cada rol, ARIA in HTML i l'APG Lectura · 14 min + test de 3 preguntes · Lectura lliure
  8. Exercici pràctic: El selector d'hora d'arribada d'un museu Pàgina real per revisar · dificultat alta · Cal matricular-se
  9. Lliçó 6: Relacions entre elements: referències per id i propietats de relació Lectura · 13 min + test de 3 preguntes · Lectura lliure
  10. Exercici pràctic: La subscripció al butlletí d'una xarxa de biblioteques Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  11. Exercici pràctic: El cercador de municipis d'una seu tributària Pàgina real per revisar · dificultat alta · Cal matricular-se
  12. Lliçó 7: Amagar, anul·lar i desactivar: aria-hidden, role="none", inert i aria-disabled Lectura · 13 min · infografia + test de 3 preguntes · Lectura lliure
  13. Exercici pràctic: Les notícies de portada d'un diari comarcal Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  14. Exercici pràctic: El botó de presentar una declaració de beneficiaris Pàgina real per revisar · dificultat alta · Cal matricular-se
  15. Lliçó 8: Regions actives: aria-live, role="status" i role="alert" (4.1.3) Lectura · 11 min + test de 3 preguntes · Lectura lliure
  16. Exercici pràctic: L'avís «afegit a la cistella» d'una llibreria en línia Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  17. Exercici pràctic: El desament de l'esborrany d'una sol·licitud de subvenció Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  18. Lliçó 9: Errors habituals amb ARIA i com detectar-los Lectura · 11 min + test de 3 preguntes · Lectura lliure
  19. Exercici pràctic: Les preguntes freqüents d'una oficina de turisme Pàgina real per revisar · dificultat mitjana · 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