Aprende a implementar los estándares WCAG 2.2 en aplicaciones web de forma práctica y eficiente. Desde el contraste de color hasta la navegación por teclado y los lectores de pantalla, domina las técnicas que hacen tu código verdaderamente inclusivo.
Cuándo usarlo: Implementar WCAG 2.2 en aplicaciones web de forma técnica y práctica
Herramienta recomendada: Claude
Actúa como un desarrollador web senior especializado en accesibilidad digital y estándares WCAG. Necesito una guía técnica completa y práctica para implementar accesibilidad web según WCAG 2.2 en un proyecto de desarrollo. **Contexto y motivación** Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 son el estándar internacional de facto para la accesibilidad digital. Cumplirlas no es solo una cuestión ética: en muchos países (incluida España con el Real Decreto 1112/2018) es una obligación legal para entidades públicas y, progresivamente, para el sector privado. La directiva europea de accesibilidad amplía el alcance a 2025. **Lo que necesito que desarrolles** 1. **Los cuatro principios WCAG explicados para developers**: Perceptible, Operable, Comprensible, Robusto (POUR). Para cada principio, explica los criterios de éxito más importantes con ejemplos de código HTML/CSS/JavaScript. 2. **Los 10 errores de accesibilidad más frecuentes**: Con ejemplos de código incorrecto y su versión corregida. Incluye: imágenes sin alt, formularios sin labels, contraste insuficiente, foco de teclado no visible, videos sin subtítulos, modales con trampa de foco. 3. **Implementación práctica de ARIA**: Cuándo usar ARIA y cuándo no (primero HTML semántico). Roles, propiedades y estados más importantes. Ejemplos de componentes complejos accesibles: tabs, modales, menús desplegables, datepickers. 4. **Pruebas de accesibilidad automatizadas y manuales**: Herramientas automáticas (axe, Lighthouse, WAVE) y sus limitaciones. Cómo hacer pruebas manuales con lector de pantalla (NVDA en Windows, VoiceOver en Mac). Cómo integrar las pruebas de accesibilidad en el pipeline de CI/CD. 5. **Accesibilidad en frameworks modernos**: Consideraciones específicas para React, Vue y Angular. Gestión del foco en SPAs, anuncios de cambios de ruta para lectores de pantalla, componentes de UI libraries y sus niveles de accesibilidad. 6. **Nivel AA vs AAA**: Qué criterios diferencian nivel A, AA y AAA. Cuál es el mínimo legal, cuál es el objetivo recomendado y qué AAA vale la pena perseguir aunque no sea obligatorio. **Formato de salida** Estructura la respuesta con secciones técnicas claras. Incluye fragmentos de código en HTML, CSS y JavaScript para ilustrar cada punto. Proporciona una checklist de implementación que el equipo pueda usar en code reviews.