prefers-reduced-motion é a consulta de mídia CSS que informa se a pessoa pediu ao sistema menos movimento. Respeitar esse pedido, oferecer pausa para o que se move sozinho e trocar deslocamento por dissolução deixa um site imersivo confortável sem apagar a atmosfera.
O que é prefers-reduced-motion?
Segundo a referência da MDN sobre prefers-reduced-motion, consultada em outubro de 2026, a consulta detecta se a pessoa ativou no aparelho uma configuração para minimizar movimento não essencial. Tem dois valores: no-preference, quando nada foi pedido, e reduce, quando o ajuste está ligado.
A MDN classifica o recurso como amplamente disponível nos navegadores desde janeiro de 2020. Não há desculpa técnica para ignorá-lo.
O motivo é de saúde, não de estética. A MDN alerta que animações podem causar desconforto em quem tem distúrbios vestibulares, e cita escala e deslocamento de objetos grandes como gatilhos típicos. Em sites imersivos, com câmera 3D e narrativa por scroll, esses gatilhos são a regra.
O que a WCAG pede sobre movimento?
A WCAG 2.2, Recomendação da W3C publicada em 12 de dezembro de 2024, tem três critérios que tocam sites imersivos.
O critério 2.2.2, Pause, Stop, Hide, é de nível A. Todo conteúdo que se move, pisca ou rola sozinho, dura mais de cinco segundos e aparece junto com outro conteúdo precisa de um jeito de pausar, parar ou esconder, salvo quando o movimento é essencial.
O critério 2.3.3, Animation from Interactions, é de nível AAA, o mais exigente dos três. Ele pede que a animação de movimento disparada por interação possa ser desligada, salvo quando for essencial. A W3C cita o parallax como exemplo de efeito que pode causar tontura, náusea e enxaqueca, e lista como técnicas suficientes o uso de prefers-reduced-motion em CSS (C39) e em JavaScript (SCR40).
O critério 1.4.2, Audio Control, também de nível A, cobre o som: áudio que toca sozinho por mais de 3 segundos precisa de controle para pausar ou de volume próprio. O panorama legal brasileiro está em Acessibilidade digital e NBR 17225.
Qual o checklist para um site imersivo que não enjoa?
Respeitar prefers-reduced-motion
leia a preferência em CSS e no JavaScript que move câmera, scroll e partículas
Dissolver em vez de congelar
troque deslocamento, zoom e giro por transições de opacidade, sem deixar conteúdo escondido
Só transform e opacity no infinito
animações em loop não devem animar sombra, filtro ou layout, que repintam a tela a cada quadro
Botão de som
nunca toque áudio sozinho; o som começa por um clique e tem botão visível para desligar
Pausar o que se move sozinho
carrossel, vídeo de fundo e cena em loop com mais de cinco segundos ganham controle de pausa
Testar com o ajuste ligado
ligue Reduzir movimento no iPhone e Remover animações no Android e percorra o site inteiro
O segundo passo é o que mais falha. Muitos sites respondem ao reduce desligando tudo, e os elementos que esperavam uma animação para aparecer ficam invisíveis. O exemplo da própria MDN faz o contrário: troca um pulso de escala por uma dissolução de opacidade.
Que animação arrisca mais, e qual a alternativa?
| Tipo de animação | Risco para quem pediu menos movimento | Alternativa com reduce ligado |
|---|---|---|
| Parallax em camadas | alto: camadas em velocidades diferentes, citado pela W3C | camadas fixas, troca de cena por opacidade |
| Zoom ou escala de objeto grande | alto: gatilho vestibular citado pela MDN | corte seco ou dissolução no tamanho final |
| Câmera 3D que gira com o scroll | alto: deslocamento de cena inteira | quadros fixos da câmera com transição suave |
| Carrossel ou cena em loop automática | médio: exige pausa pelo critério 2.2.2 após cinco segundos | parado por padrão, com botão de reproduzir |
| Entrada de texto que desliza | baixo a médio | texto que apenas surge por opacidade |
| Som que toca sozinho | alto: exige controle pelo critério 1.4.2 após 3 segundos | silêncio por padrão, som só por clique |
Fontes: MDN, prefers-reduced-motion, e W3C, Understanding WCAG 2.2 (critérios 1.4.2, 2.2.2 e 2.3.3), consultados em outubro de 2026. A classificação de risco é leitura editorial da Brave Cross a partir desses textos.
Como a Brave Cross aplica isso no próprio site?
Quando o visitante liga "Reduzir movimento", o site da Brave Cross dissolve em vez de congelar: o conteúdo continua aparecendo, sem deslocamento. E as animações infinitas usam apenas transform e opacity, que não obrigam o navegador a repintar a tela a cada quadro.
As duas regras andam juntas com performance. Explicamos o lado do peso e dos quadros em Site 3D pesa?, e o impacto nas métricas do Google em Core Web Vitals em 2026.
Como testar com Reduzir movimento ligado?
No iPhone, a Apple orienta abrir Ajustes, depois Acessibilidade, tocar em Movimento e ligar Reduzir movimento. No Android 9 ou mais recente, a MDN indica o caminho Configurações, Acessibilidade, Remover animações. No macOS e no Windows há ajustes equivalentes nas opções de acessibilidade.
Com o ajuste ligado, percorra o site inteiro no aparelho real, não só a primeira tela. Confira três coisas: nenhum conteúdo some, nada desliza ou gira por conta própria e o que roda em loop tem como parar.
Perguntas frequentes
O que é prefers-reduced-motion?
É uma consulta de mídia CSS que detecta se a pessoa ativou no aparelho a opção de reduzir movimento. Segundo a MDN, consultada em outubro de 2026, ela tem os valores no-preference e reduce e está disponível nos navegadores desde janeiro de 2020. O site usa essa informação para trocar animações de deslocamento por versões mais calmas.
Como ativar reduzir movimento no iPhone?
Segundo o suporte da Apple, consultado em outubro de 2026, o caminho é Ajustes, Acessibilidade, Movimento e então ligar Reduzir movimento. Com o ajuste ligado, sites que respeitam prefers-reduced-motion passam a receber o valor reduce e podem suavizar ou trocar suas animações. Vale ligar para testar o próprio site antes de publicar.
O que diz o critério 2.3.3 da WCAG?
O critério 2.3.3, Animation from Interactions, da WCAG 2.2 (W3C, dezembro de 2024), é de nível AAA. Ele pede que a animação de movimento disparada por interação possa ser desligada, salvo quando for essencial. A W3C aceita como técnica o uso de prefers-reduced-motion em CSS ou em JavaScript, e cita o parallax como gatilho de tontura e náusea.
Reduzir movimento significa tirar todas as animações?
Não. A MDN descreve o objetivo como remover, reduzir ou substituir animações de movimento, e o próprio exemplo dela troca um pulso por uma dissolução. Tirar tudo costuma esconder conteúdo que dependia da animação para aparecer. O melhor caminho é manter as transições de opacidade e cortar deslocamento, zoom e giro.
Site 3D pode ser acessível?
Pode, desde que a cena respeite a preferência do sistema, tenha pausa para o que se move sozinho e não toque som sem clique. A WCAG 2.2 pede pausa para movimento automático acima de cinco segundos (critério 2.2.2, nível A) e controle de áudio automático acima de 3 segundos (critério 1.4.2, nível A).
Quer aprender a animar sem deixar ninguém de fora?
Movimento bem feito orienta, dá ritmo e cria memória. Para quem pediu menos movimento, a mesma experiência precisa chegar por outro caminho: dissolução no lugar do deslocamento, pausa no lugar do loop eterno e silêncio no lugar do som automático. O contexto completo de sites imersivos está no guia de site 3D, e se a sua marca precisa de um site assim, a Brave Cross conversa com você.
Para estudar Front-End e Next.js com esse cuidado, conheça a Brave Cross Education.