É fácil pedir “mais vida” para uma landing page e receber parallax, cards que surgem ao rolar, números que contam, vídeo automático e um CTA pulsando sem parar. O conjunto pode distrair, provocar desconforto e esconder conteúdo de quem prefere menos movimento no sistema.

Reduzir movimento não significa desligar toda transição nem substituir a página por uma versão sem acabamento. Significa remover efeitos dispensáveis, preservar informação e oferecer uma experiência estável quando essa preferência está ativa.

Este guia organiza a auditoria, a correção e o reteste da URL publicada.

Separe movimento de feedback

Antes de alterar CSS, classifique cada efeito:

  • Movimento decorativo, como formas flutuando na hero. A página comunica o mesmo sem isso?
  • Transição de estado, como um accordion abrindo. Existe um estado final claro sem deslocamento amplo?
  • Feedback, como um indicador de envio. A pessoa ainda percebe que a ação está em andamento?
  • Conteúdo em movimento, como um carrossel automático. É possível pausar e acessar todos os itens?
  • Navegação espacial, como parallax e zoom. O efeito pode ser removido sem perder contexto?
  • Movimento essencial, como uma demonstração cujo movimento é o conteúdo. Existe alternativa ou controle adequado?

Essa separação evita uma correção global que apaga spinners, estados de carregamento ou outras pistas necessárias.

Entenda o que a preferência do sistema comunica

A media query prefers-reduced-motion detecta quando a pessoa pediu ao sistema uma interface com menos movimento não essencial. O valor relevante é reduce. no-preference apenas indica que nenhuma preferência foi informada.

Uma base simples:

.hero-art {
  animation: float 8s ease-in-out infinite;
}


@media (prefers-reduced-motion: reduce) {
  .hero-art {
    animation: none;
  }
}

Não use a preferência como atalho para esconder conteúdo. Se um bloco só ganha opacity: 1 no fim de uma animação, a versão reduzida precisa começar visível.

Não aplique um reset cego em tudo

Este tipo de regra parece prático:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Ela pode interromper feedback, quebrar componentes que dependem de eventos de animação e remover mudanças de estado úteis. Também dificulta entender qual efeito exigia tratamento.

Prefira regras por responsabilidade:

  • remova movimento decorativo contínuo;
  • troque deslocamentos grandes por mudança imediata ou fade discreto;
  • preserve o estado final visível;
  • mantenha feedback essencial sem pulsação agressiva;
  • pare autoplay quando o conteúdo continua acessível manualmente;
  • teste cada componente que usa JavaScript para animar.

O artigo sobre animações lentas em landing pages cobre custo de renderização e compositor. Uma animação pode ser fluida e continuar sendo uma barreira. Performance e acessibilidade não são o mesmo teste.

Mapeie todos os motores de movimento

Nem tudo aparece numa busca por animation.

Procure:

@keyframes
animation
transition
transform
scroll-behavior
requestAnimationFrame
Element.animate
setInterval
setTimeout
autoplay
marquee
carousel
parallax
IntersectionObserver
bibliotecas de motion

Revise também GIFs, vídeos, Lottie, canvas, WebGL e embeds. CSS não consegue pausar uma animação que está dentro de um arquivo ou de um iframe de terceiros.

Para cada ocorrência, registre origem, gatilho, duração, repetição, área ocupada e comportamento com movimento reduzido.

Priorize os efeitos com maior impacto

Comece pelo que ocupa grande parte da tela ou reage diretamente à entrada da pessoa:

  • zoom de página ou imagem;
  • parallax ligado à rolagem;
  • fundos em movimento contínuo;
  • carrossel que avança sozinho;
  • elementos que atravessam longas distâncias;
  • contadores e barras que reiniciam;
  • transições disparadas a cada hover;
  • rolagem suave forçada;
  • modal que entra com escala ampla;
  • vídeo de fundo automático.

O critério 2.3.3 da WCAG 2.2 trata animação de movimento acionada por interação e permite exceção quando ela é essencial para a função ou informação. O critério é nível AAA. Isso não transforma outros efeitos em escolha segura. Use-o como referência para oferecer controle e questionar se o movimento realmente precisa existir.

Trate rolagem e parallax com cuidado

Efeitos ligados à rolagem podem mover o conteúdo em velocidade diferente da ação da pessoa. Para o modo reduzido:

  • desligue parallax;
  • remova zoom baseado em scroll;
  • evite reposicionar grandes superfícies;
  • mostre o conteúdo no lugar final;
  • considere scroll-behavior: auto;
  • preserve links âncora e restauração de posição.
html {
  scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Teste links internos, retorno do navegador e foco. Remover uma interpolação não pode alterar o destino.

Ofereça controle para conteúdo automático

Carrosséis, banners, notícias e outros blocos que começam sozinhos exigem atenção além da media query. O critério Pause, Stop, Hide da WCAG 2.2 trata conteúdo que se move, pisca, rola ou atualiza automaticamente em certas condições.

Na prática:

  • evite autoplay quando não há benefício real;
  • inclua um controle de pausa que possa ser encontrado por teclado;
  • mantenha a escolha durante a sessão quando fizer sentido;
  • não reinicie o movimento a cada mudança de foco;
  • permita chegar a todos os itens sem esperar o ciclo;
  • não esconda o conteúdo atual quando a animação para.

Um carrossel parado ainda precisa ter ordem, rótulos, botões e estado compreensíveis.

Revise vídeo e GIF separadamente

Um vídeo de fundo pode ser decorativo para o conteúdo e ainda dominar a experiência. Avalie se uma imagem estática entrega a mesma composição no modo reduzido.

Para vídeo informativo:

  • não remova acesso ao conteúdo;
  • ofereça controles de reprodução;
  • preserve legendas e alternativa prevista;
  • use poster coerente;
  • evite iniciar com áudio;
  • confirme que pausar não apaga instruções necessárias.

GIF animado não tem um controle nativo confiável em todas as páginas. Uma imagem estática, vídeo com controles ou implementação que permita pausa costuma dar mais controle.

Faça JavaScript acompanhar a preferência

Bibliotecas e canvas podem precisar de uma decisão no código:

const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");


function renderMotionPreference() {
  if (reducedMotion.matches) {
    stopDecorativeMotion();
    showFinalState();
    return;
  }


  startDecorativeMotion();
}


renderMotionPreference();
reducedMotion.addEventListener("change", renderMotionPreference);

Garanta que iniciar e parar sejam idempotentes. Trocar a preferência durante a sessão não deve duplicar timers, listeners ou frames.

Se o framework renderiza no servidor, não presuma acesso a window durante o build. Faça a leitura no ambiente do navegador e entregue um estado inicial utilizável sem depender do script.

Preserve informação e ordem de leitura

Efeitos de entrada costumam esconder blocos até um observer disparar. No modo reduzido, o conteúdo precisa existir e ficar visível desde o início.

Revise:

  • opacity: 0 deixada no estado inicial;
  • visibility: hidden removida apenas no fim da animação;
  • elementos fora da viewport por transform;
  • texto revelado letra por letra;
  • números que começam em zero e nunca chegam ao valor final;
  • etapas que dependem de uma timeline;
  • DOM reordenado para combinar com uma sequência visual.

A ordem sem animação deve continuar lógica para teclado e leitor de tela. O checklist de acessibilidade para sites criados por IA amplia o teste para semântica, contraste, formulários e mídia.

Teste com a preferência realmente ativa

Não basta reduzir a duração no DevTools e olhar uma captura. Ative a preferência no sistema ou use a emulação do navegador quando ela fizer parte do ambiente de teste.

Percorra este roteiro:

  1. carregue a página do zero com reduce ativo;
  2. confirme que todo conteúdo aparece;
  3. navegue por âncoras, menu, accordion e modal;
  4. teste hover, foco, clique e rolagem;
  5. pause carrosséis e vídeos;
  6. envie o formulário e observe carregamento, erro e sucesso;
  7. altere a preferência durante a sessão;
  8. repita em largura pequena;
  9. compare com a experiência padrão.

Registre efeitos removidos, substituídos e mantidos. Para cada exceção, explique qual informação ou função depende do movimento.

Verifique flashes como risco separado

Movimento e flash não são sinônimos. Um efeito pode permanecer parado no espaço e piscar rapidamente. A WCAG trata flashes em critérios próprios porque eles podem causar reações físicas.

Não confie em “parece leve”. Sinalize vídeos, anúncios, strobe, glitches e transições com contraste forte para avaliação específica. Remover movimento no modo reduzido não autoriza uma versão padrão com flash perigoso.

Escreva um pedido de correção limitado

Depois do inventário, peça ao agente uma mudança verificável:

Revise o movimento desta landing page.


Escopo:
- fonte e versão: [origem]
- páginas: [rotas]
- componentes: [lista]
- referência: prefers-reduced-motion e WCAG 2.2


Primeiro, inventarie animações CSS, JavaScript, vídeo, GIF e embeds.
Classifique cada efeito como decorativo, feedback, conteúdo ou essencial.


Na correção:
- remova movimento decorativo quando reduce estiver ativo;
- preserve conteúdo e estado final visíveis;
- mantenha feedback necessário sem deslocamento amplo;
- pare autoplay não essencial;
- não aplique reset global com !important;
- não altere texto, layout, tracking ou destino dos CTAs.


Retorne o diff, a justificativa de cada exceção e o roteiro de teste.
Não publique antes da revisão.

Esse limite impede que um pedido de acessibilidade vire redesenho da página.

Reteste a URL publicada

O pacote final pode carregar um script externo diferente, uma versão antiga da animação ou um vídeo que não apareceu no ambiente local.

Depois do deploy:

  1. confirme a versão e a URL;
  2. carregue com preferência padrão;
  3. carregue novamente com movimento reduzido;
  4. percorra a tarefa principal nas duas condições;
  5. verifique conteúdo, foco, formulário e controles de pausa;
  6. confirme que não há timers ou movimento depois da troca;
  7. registre navegador, sistema e largura.

Se algo falhar, corrija a fonte e use o fluxo de republicação no mesmo Site. A URL permanece, enquanto a nova versão substitui o pacote aprovado.

Mantenha um orçamento de movimento

Animações voltam aos poucos. Um novo banner pulsa, outro componente desliza e uma campanha adiciona vídeo automático. Defina um contrato curto:

movimento decorativo permitido:
efeitos proibidos:
componentes com autoplay:
controle de pausa:
comportamento com reduce:
exceções e justificativa:
navegadores testados:
data do reteste:

Esse registro ajuda o agente a reutilizar as decisões da página em vez de inventar uma nova política a cada ajuste. Menos movimento não é uma versão inferior. É a mesma tarefa, com menos deslocamento e mais controle para quem pediu isso ao sistema.