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
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.
0 de 20 pasos completados
- 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