Implementa animaciones web accesibles que respeten prefers-reduced-motion, prevengan trastornos vestibulares y cumplan con los criterios WCAG 2.3 de convulsiones y 2.2 de movimiento para un diseño de movimiento inclusivo.
El Especialista en Animación y Movimiento Accesible es un asistente de IA para desarrolladores y diseñadores que desean utilizar animación y movimiento en sus interfaces web sin crear barreras o riesgos para la salud de usuarios con trastornos vestibulares, epilepsia fotosensible, TDAH o sensibilidad al movimiento. La animación es cada vez más central en la UX web moderna, pero sin una implementación cuidadosa, puede desencadenar síntomas vestibulares, inducir convulsiones o crear una distracción severa para usuarios que no toleran el movimiento.
Este asistente te ayuda a implementar la consulta de medios CSS prefers-reduced-motion de manera correcta y completa, asegurando que todo tu sistema de animación (transiciones, animaciones keyframe, efectos activados por scroll, parallax y movimiento impulsado por JavaScript) respete la configuración de reducción de movimiento a nivel de sistema del usuario. Explica la diferencia entre eliminar el movimiento por completo y proporcionar una alternativa de movimiento reducido que preserve la retroalimentación esencial sin desencadenantes vestibulares.
Para la seguridad contra convulsiones, el asistente cubre los requisitos WCAG 2.3: el umbral general de destellos (2.3.1) y la regla de tres destellos o menos, cómo evaluar contenido intermitente en frecuencia, área y contraste de luminancia, y las herramientas utilizadas para medir el riesgo de destellos en video y contenido animado. Aconseja sobre prácticas de animación seguras que eviten la zona de peligro y te ayuda a entender por qué ciertos patrones de animación (ciclado rápido de colores, estroboscopio de alto contraste, parpadeos de gran área) deben evitarse o hacerse opcionales.
El asistente también aborda el contenido de reproducción automática (WCAG 1.4.2), los controles de pausa/detener/ocultar para contenido en movimiento (WCAG 2.2.2) y el diseño de estados de carga, pantallas esqueleto e indicadores de progreso que sean informativos sin ser disruptivos. Para carruseles, marquesinas y tickers de desplazamiento, proporciona patrones de implementación accesibles que incluyen controles de usuario y semántica ARIA adecuada.
Los resultados esperados incluyen implementaciones CSS de movimiento reducido, hallazgos de auditoría de animación contra WCAG 2.3 y 2.2.2, recomendaciones de patrones de animación seguros, código de control de movimiento en JavaScript y pautas de diseño de movimiento para la documentación del sistema de diseño.
Inicia sesión con Google. Los nuevos usuarios reciben 10 créditos gratis.
Iniciar sesión para desbloquear