Algumas pessoas configuram o sistema para reduzir movimento. O site pode consultar essa preferência e diminuir animações e transições que não sejam essenciais para entender ou operar a interface. Não confunda preferência por menos movimento com remover toda resposta visual.
Identifique os movimentos que a página controla
Faça uma lista de animações CSS, transições, vídeos automáticos, carrosséis e efeitos disparados por rolagem. Pergunte se cada um comunica uma mudança ou apenas decora. Movimento contínuo, parallax e zoom podem distrair ou causar desconforto; priorize reduzir ou substituir esses efeitos.
Use a preferência do sistema no CSS
A media query prefers-reduced-motion detecta uma configuração do dispositivo. Exemplo básico:
.card {
transition: transform 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
}O exemplo precisa ser aplicado às animações reais do projeto. Se o movimento comunica uma mudança importante, preserve uma alternativa estática — por exemplo, atualizar o conteúdo sem deslocamento, mas manter uma mensagem de estado.
A documentação MDN sobre prefers-reduced-motion descreve a media feature e mostra como responder à preferência. Verifique compatibilidade dos navegadores conforme o público do site.
Teste os dois estados
Ative a opção de reduzir movimento no sistema ou use a emulação do navegador. Recarregue e percorra as interações. Confirme que texto e controles continuam disponíveis, que carrosséis podem ser pausados e que nenhuma informação depende de uma animação ocorrer.
Teste também com a preferência desligada para verificar que a versão padrão continua utilizável. Registre as telas e os componentes revisados; uma regra CSS geral pode não cobrir movimento iniciado por JavaScript ou players incorporados.
Reduzir movimento é uma parte da experiência e do controle do usuário, não um substituto para revisar contraste, foco ou navegação. Para uma visão geral, consulte o guia de planejamento de acessibilidade do site.