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

Nivell 3: Desenvolupament web accessible · Desenvolupament web

N3-C3 Teclat i gestió del focus

Si una interfície funciona amb teclat, funciona amb lectors de pantalla, amb commutadors, amb control per veu i amb la majoria de les tecnologies de suport. Aquest curs cobreix l'operabilitat completa amb teclat, el model de focus del navegador, l'ordre i la visibilitat del focus, la navegació amb fletxes en components compostos, els esdeveniments i les dreceres de teclat, la gestió del focus en finestres modals i aplicacions d'una sola pàgina, i un protocol de prova que pots aplicar a qualsevol pàgina en deu minuts.

  • 10 lliçons
  • 1 vídeo amb subtítols
  • 2 infografies
  • 125 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 garantir que tota la funcionalitat és operable amb teclat sense paranys ni dreceres conflictives (2.1.1, 2.1.2, 2.1.4).
  • Distingiràs elements enfocables i tabulables, observaràs el focus amb JavaScript i CSS i evitaràs el focus fantasma en el contingut ocult i els canvis de context en rebre el focus (3.2.1).
  • Mantindràs un ordre del focus lògic i un indicador de focus visible i no ocult (2.4.3, 2.4.7, 2.4.11) fent servir tabindex només amb els valors 0 i -1.
  • Implementaràs la navegació amb fletxes en components compostos mitjançant roving tabindex o aria-activedescendant, i sabràs quan convé cada tècnica.
  • Programaràs esdeveniments i dreceres de teclat robustos (keydown, e.key, modificadors) que no xoquin amb el teclat espanyol, el navegador ni els lectors de pantalla.
  • Implementaràs enllaços de salt i gestionaràs el focus en finestres modals, contingut dinàmic i canvis de vista en SPA.
  • Comprendràs com fan servir el teclat i el focus els lectors de pantalla, el control per veu, els commutadors i els ampliadors, i aplicaràs el 2.5.3 Etiqueta en el nom.
  • Aplicaràs un protocol de prova amb teclat reproduïble i documentaràs els resultats.

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:05 · subtitulat + test de 3 preguntes · Lectura lliure
  2. Lliçó 2: Tot operable amb teclat (2.1.1), sense paranys (2.1.2) i dreceres (2.1.4) Lectura · 10 min + test de 3 preguntes · Lectura lliure
  3. Exercici pràctic: La fitxa d'un tràmit amb seccions desplegables Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  4. Exercici pràctic: El camp de resposta d'un gestor d'incidències Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  5. Lliçó 3: Com funciona el focus: enfocable, tabulable, esdeveniments i contingut ocult Lectura · 14 min · infografia + test de 3 preguntes · Lectura lliure
  6. Exercici pràctic: Les preguntes freqüents d'una cooperativa d'habitatges Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  7. Lliçó 4: Ordre del focus (2.4.3), focus visible (2.4.7), focus no ocult (2.4.11) i tabindex Lectura · 11 min + test de 3 preguntes · Lectura lliure
  8. Exercici pràctic: La inscripció en una cursa popular recorreguda amb Tab Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  9. Lliçó 5: Components compostos: navegació amb fletxes, roving tabindex i aria-activedescendant Lectura · 14 min + test de 3 preguntes · Lectura lliure
  10. Exercici pràctic: La barra de format de l'editor d'avisos d'una escola Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  11. Exercici pràctic: El camp de municipi amb suggeriments d'un abonament de transport Pàgina real per revisar · dificultat alta · Cal matricular-se
  12. Lliçó 6: Esdeveniments de teclat i dreceres pròpies: implementar-les sense trencar res Lectura · 13 min + test de 3 preguntes · Lectura lliure
  13. Exercici pràctic: Les dreceres de teclat d'un gestor d'expedients Pàgina real per revisar · dificultat alta · Cal matricular-se
  14. Lliçó 7: Skip links, gestió del focus en SPA, finestres modals i contingut dinàmic Lectura · 11 min · infografia + test de 3 preguntes · Lectura lliure
  15. Exercici pràctic: L'enllaç de salt del web d'una xarxa de biblioteques Pàgina real per revisar · dificultat bàsica · Cal matricular-se
  16. Exercici pràctic: La confirmació per anul·lar una reserva esportiva Pàgina real per revisar · dificultat mitjana · Cal matricular-se
  17. Exercici pràctic: El canvi de secció a l'àrea privada d'una mutualitat Pàgina real per revisar · dificultat alta · Cal matricular-se
  18. Lliçó 8: El teclat i les tecnologies de suport: lectors de pantalla, veu, commutadors i ampliadors Lectura · 14 min + test de 3 preguntes · Lectura lliure
  19. Lliçó 9: Comprovar amb teclat: protocol de prova Lectura · 9 min + test de 3 preguntes · Lectura lliure
  20. Lliçó 10: Cas pràctic, exercicis i llista de comprovació Cas pràctic · 25 min + test de 3 preguntes · Lectura lliure