Como reduzir animações disparadas por interação

Movimentos disparados por clique, rolagem, abertura de menu ou transição de tela podem causar tontura, náusea ou distração para algumas pessoas. O critério 2.3.3 da WCAG 2.2 (nível AAA) orienta permitir desativar animação não essencial iniciada por interação; respeitar a preferência do sistema é um caminho prático.

Prefira estados claros a movimento obrigatório

Animação não deve ser o único meio de perceber que um menu abriu, uma aba mudou ou um item foi adicionado. Mantenha o estado final, foco, rótulo e mensagem de status mesmo quando o movimento estiver reduzido.

.painel {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 180ms ease, transform 180ms ease;
}
.painel[data-aberto="true"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Esse padrão reduz a duração visual sem esconder o conteúdo nem mudar a semântica. Revise bibliotecas e animações via JavaScript também: CSS não cancela automaticamente uma animação criada com Web Animations API. Nesses casos, consulte matchMedia('(prefers-reduced-motion: reduce)') antes de animar e vá direto ao estado final quando a preferência estiver ativa.

Inventarie e teste as interações

1. Acione cada efeito com teclado, mouse, toque e rolagem: modal, menu, carrossel, parallax, expansão e transição de página.
2. Registre gatilho, duração, distância/escala, objetivo e se a informação desapareceria ao retirar o movimento.
3. Ative “reduzir movimento” no sistema operacional e recarregue a página; repita os mesmos fluxos. Confirme que foco, ordem, conteúdo e feedback continuam visíveis e que a página não rola animadamente.
4. Se a preferência não puder ser detectada pela tecnologia, ofereça controle persistente e simples para reduzir movimento. Não substitua o controle de movimento por bloqueio de conteúdo.

A W3C explica que movimentos de parallax e outros efeitos iniciados por interação podem causar reações vestibulares e recomenda evitá-los, oferecer controle ou usar a preferência de redução de movimento. Leia Animation from Interactions — W3C. Veja também o núcleo de desempenho.