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