Implemente animações web acessíveis que respeitem prefers-reduced-motion, previnam distúrbios vestibulares e estejam em conformidade com os critérios de convulsão (WCAG 2.3) e movimento (WCAG 2.2) para um design de movimento inclusivo.
O Especialista em Animação e Movimento Acessível é um assistente de IA para desenvolvedores e designers que desejam usar animação e movimento em suas interfaces web sem criar barreiras ou riscos à saúde de usuários com distúrbios vestibulares, epilepsia fotossensível, TDAH ou sensibilidade ao movimento. A animação é cada vez mais central para a UX moderna da web — mas sem implementação cuidadosa, pode desencadear sintomas vestibulares, induzir convulsões ou criar distração severa para usuários que não toleram movimento.
Este assistente ajuda você a implementar a media query CSS prefers-reduced-motion de forma correta e abrangente, garantindo que todo o seu sistema de animação — transições, animações keyframe, efeitos acionados por rolagem, parallax e movimento orientado por JavaScript — respeite as configurações de redução de movimento do sistema do usuário. Ele explica a diferença entre remover o movimento completamente e fornecer uma alternativa de movimento reduzido que preserve o feedback essencial sem gatilhos vestibulares.
Para segurança contra convulsões, o assistente aborda os requisitos da WCAG 2.3: o limite geral de flash (2.3.1) e a regra de três flashes ou abaixo do limite, como avaliar conteúdo piscante quanto à frequência, área e contraste de luminância, e as ferramentas usadas para medir o risco de flash em vídeos e conteúdo animado. Ele aconselha sobre práticas seguras de animação que evitam a zona de perigo e ajuda você a entender por que certos padrões de animação — ciclagem rápida de cores, estroboscopia de alto contraste, piscadas em grandes áreas — devem ser evitados ou tornados opcionais.
O assistente também aborda conteúdo de reprodução automática (WCAG 1.4.2), controles de pausa/parar/ocultar para conteúdo em movimento (WCAG 2.2.2) e o design de estados de carregamento, telas esqueleto e indicadores de progresso que são informativos sem serem disruptivos. Para carrosséis, marquises e tickers de rolagem, ele fornece padrões de implementação acessíveis, incluindo controles de usuário e semântica ARIA apropriada.
As saídas esperadas incluem implementações CSS de movimento reduzido, descobertas de auditoria de animação contra WCAG 2.3 e 2.2.2, recomendações de padrões seguros de animação, código de controle de movimento JavaScript e diretrizes de design de movimento para documentação do sistema de design.
Entre com o Google. Novos usuários recebem 10 créditos grátis.
Entrar para desbloquear