Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C6 CSS, JavaScript y frameworks
La accesibilidad no termina en el HTML. El CSS decide qué se ve, cómo se muestra el foco y cómo se adapta la página a las preferencias de cada persona; el JavaScript decide qué cambia y cuándo; y los frameworks reescriben la página sin recargarla. Este curso enseña a programar todo ello de forma accesible en CSS, JavaScript, React, Vue, Angular y Web Components, y a integrar pruebas automáticas para que los errores no vuelvan.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 157 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 ocultar contenido de forma visual, de forma accesible o de ambas, y evitarás que el CSS rompa el orden de lectura, el reflow o el contenido generado.
- Programarás indicadores de foco robustos, evitarás que los elementos fijos tapen el foco (2.4.11) y harás que los objetivos de puntero (2.5.8) y el contenido emergente (1.4.13) cumplan.
- Adaptarás la interfaz al modo de colores forzados, a prefers-contrast y al modo oscuro sin perder forma, estado, foco ni contraste.
- Aplicarás prefers-reduced-motion y cumplirás 2.2.2 y 2.3.3 en animaciones y contenido en movimiento.
- Escribirás JavaScript que respete 2.5.2, 3.2.1, 3.2.2 y 2.2.1 y que mantenga el foco en un sitio lógico cuando el contenido aparece o desaparece.
- Resolverás en React, Vue y Angular el enrutado, la gestión del foco, los anuncios y los títulos de página de una SPA.
- Diseñarás componentes reutilizables y Web Components cuya API garantice nombre, rol y semántica, conociendo los límites del Shadow DOM.
- Integrarás axe-core, eslint-plugin-jsx-a11y, Lighthouse y pruebas de extremo a extremo en el flujo de desarrollo e interpretarás sus límites.
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: CSS accesible: ocultación, contenido generado, reflow y orden visual
- Paso 3: Ejercicio práctico: Los botones de acción de una tabla de solicitudes
- Paso 4: Ejercicio práctico: Los enlaces «Leer más» de la página de noticias de un ayuntamiento
- Paso 5: Ejercicio práctico: Las tarjetas de cursos de un centro municipal de idiomas
- Paso 6: Ejercicio práctico: El formulario de solicitud de plaza de una escuela de música
- Paso 7: Lección 3: CSS para la interacción: foco visible, objetivos de puntero, elementos fijos y contenido emergente
- Paso 8: Lección 4: Preferencias del usuario en CSS: colores forzados, contraste y modo oscuro
- Paso 9: Ejercicio práctico: La pantalla de preferencias de una compañía de aguas en modo de contraste
- Paso 10: Lección 5: Movimiento y animación: prefers-reduced-motion, 2.2.2 y 2.3.3
- Paso 11: Ejercicio práctico: La franja de avisos en directo de la web de un puerto
- Paso 12: Lección 6: JavaScript accesible: eventos, cambios de contexto, límites de tiempo y contenido dinámico
- Paso 13: Ejercicio práctico: Los botones «Eliminar» de la bandeja de un colegio profesional
- Paso 14: Lección 7: SPAs (React, Vue, Angular): enrutado, foco, anuncios y títulos
- Paso 15: Ejercicio práctico: Los cambios de vista del portal del empleado de una diputación
- Paso 16: Lección 8: Componentes reutilizables y Web Components: API accesible, semántica y Shadow DOM
- Paso 17: Ejercicio práctico: El componente de campo de texto del sistema de diseño de un consorcio
- Paso 18: Lección 9: Pruebas automáticas en el flujo de desarrollo: axe-core, eslint-plugin-jsx-a11y, Lighthouse y tests e2e
- Paso 19: Ejercicio práctico: La propuesta de pruebas automáticas de una aplicación de reservas
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación