Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C3 Teclado y gestión del foco
Si una interfaz funciona con teclado, funciona con lectores de pantalla, con conmutadores, con control por voz y con la mayoría de las tecnologías de apoyo. Este curso cubre la operabilidad completa con teclado, el modelo de foco del navegador, el orden y la visibilidad del foco, la navegación con flechas en componentes compuestos, los eventos y atajos de teclado, la gestión del foco en modales y aplicaciones de una sola página, y un protocolo de prueba que puedes aplicar a cualquier página en diez minutos.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 125 minutos
- 10 ejercicios prácticos
- Test de práctica ilimitado
Contenido revisado el 26/10/2026 · Historial de actualizaciones · Cómo se elabora y se evalúa
Objetivos
- Al terminar sabrás garantizar que toda funcionalidad es operable con teclado sin trampas ni atajos conflictivos (2.1.1, 2.1.2, 2.1.4).
- Distinguirás elementos enfocables y tabulables, observarás el foco con JavaScript y CSS y evitarás el foco fantasma en el contenido oculto y los cambios de contexto al recibir el foco (3.2.1).
- Mantendrás un orden del foco lógico y un indicador de foco visible y no oculto (2.4.3, 2.4.7, 2.4.11) usando tabindex solo con los valores 0 y -1.
- Implementarás la navegación con flechas en componentes compuestos mediante roving tabindex o aria-activedescendant, sabiendo cuándo conviene cada técnica.
- Programarás eventos y atajos de teclado robustos (keydown, e.key, modificadores) que no choquen con el teclado español, el navegador ni los lectores de pantalla.
- Implementarás enlaces de salto y gestionarás el foco en modales, contenido dinámico y cambios de vista en SPA.
- Comprenderás cómo usan el teclado y el foco los lectores de pantalla, el control por voz, los conmutadores y los ampliadores, y aplicarás 2.5.3 Etiqueta en el nombre.
- Aplicarás un protocolo de prueba con teclado reproducible y documentarás los resultados.
El curso, paso a paso
El curso es guiado: después de cada lección haces un test corto y, cuando toca, uno o varios ejercicios prácticos con una página real que revisar. Al superarlos se abre el paso siguiente.
Todas las lecciones se pueden leer libremente. Para hacer los tests, los ejercicios prácticos, guardar tu avance y optar al examen y al certificado, matricúlate.
- Paso 1: Lección 1: Presentación del curso en vídeo
- Paso 2: Lección 2: Todo operable con teclado (2.1.1), sin trampas (2.1.2) y atajos (2.1.4)
- Paso 3: Ejercicio práctico: La ficha de un trámite con secciones desplegables
- Paso 4: Ejercicio práctico: El campo de respuesta de un gestor de incidencias
- Paso 5: Lección 3: Cómo funciona el foco: enfocable, tabulable, eventos y contenido oculto
- Paso 6: Ejercicio práctico: Las preguntas frecuentes de una cooperativa de viviendas
- Paso 7: Lección 4: Orden del foco (2.4.3), foco visible (2.4.7), foco no oculto (2.4.11) y tabindex
- Paso 8: Ejercicio práctico: La inscripción en una carrera popular recorrida con Tab
- Paso 9: Lección 5: Componentes compuestos: navegación con flechas, roving tabindex y aria-activedescendant
- Paso 10: Ejercicio práctico: La barra de formato del editor de avisos de un colegio
- Paso 11: Ejercicio práctico: El campo de municipio con sugerencias de un bono de transporte
- Paso 12: Lección 6: Eventos de teclado y atajos propios: implementarlos sin romper nada
- Paso 13: Ejercicio práctico: Los atajos de teclado de un gestor de expedientes
- Paso 14: Lección 7: Skip links, gestión del foco en SPA, modales y contenido dinámico
- Paso 15: Ejercicio práctico: El enlace de salto de la web de una red de bibliotecas
- Paso 16: Ejercicio práctico: La confirmación para anular una reserva deportiva
- Paso 17: Ejercicio práctico: El cambio de sección en el área privada de una mutualidad
- Paso 18: Lección 8: El teclado y las tecnologías de apoyo: lectores de pantalla, voz, conmutadores y ampliadores
- Paso 19: Lección 9: Comprobar con teclado: protocolo de prueba
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación