prefers-reduced-motion: padrões em CSS, JavaScript e React | We.Inc
Detecte a configuração de reduzir movimento em CSS e JavaScript, veja sua própria configuração ao vivo e copie padrões que trocam movimentos grandes por fades em vez de apagar a animação.
Como respeitar o prefers-reduced-motion
prefers-reduced-motion é uma media feature do CSS que informa se o visitante pediu ao dispositivo menos movimento. Ela tem dois valores, no-preference e reduce. Envolva movimentos grandes, como parallax, zooms e deslizamentos, em uma query e, quando o valor for reduce, troque-os por um fade curto ou por nenhuma animação.
about:config, defina ui.prefersReducedMotion como 1
As pessoas ativam a redução de movimento porque deslizamentos, zooms e parallax podem causar tontura, náusea ou dor de cabeça, principalmente em quem tem distúrbios vestibulares. O selo abaixo lê a configuração do seu próprio dispositivo ao vivo, e a demonstração mostra a mesma animação na versão completa e na reduzida, para você comparar antes de escolher um padrão.
Confira o selo: ele mostra o que o seu dispositivo informa agora e se atualiza se você mudar a configuração.
Use o seletor de prévia para ver a versão reduzida da demonstração sem mudar a configuração do sistema.
Copie o padrão em CSS, JavaScript ou React que combina com a forma como o seu site anima.
Reduza, não remova. Um fade rápido de opacidade ainda mostra que algo mudou, sem atravessar a tela.
Escreva o movimento como melhoria: coloque as animações dentro de @media (prefers-reduced-motion: no-preference) para que a versão segura seja o padrão.
Vídeos com reprodução automática e carrosséis também precisam de um controle de pausa, seja qual for a configuração de movimento.
No Chrome DevTools você pode emular a configuração pelo painel Rendering para testar sem mudar o sistema.
Efeitos acionados pela rolagem também contam. Parallax grande e scroll-jacking são as reclamações mais comuns.
Perguntas frequentes
Quais valores o prefers-reduced-motion tem?
Dois: no-preference, quando o visitante não definiu nada, e reduce, quando ele pediu menos movimento. Escrever @media (prefers-reduced-motion) sozinho é o mesmo que perguntar por reduce.
Como verifico o prefers-reduced-motion em JavaScript?
Chame window.matchMedia("(prefers-reduced-motion: reduce)") e leia a propriedade matches. Adicione um listener do evento change ao objeto retornado para reagir quando a configuração mudar com a página aberta.
Devo desligar todas as animações quando reduce estiver ativo?
Não. O pedido é por menos movimento, não por uma página congelada. Mantenha mudanças de cor, fades curtos e indicadores de progresso, e remova ou diminua movimentos como deslizar, escalar, girar e parallax.
Respeitar a redução de movimento é exigido pelo WCAG?
O WCAG 2.3.3 Animação a partir de interações, nível AAA, pede que o movimento acionado por interação possa ser desligado, a menos que seja essencial. Respeitar a configuração do sistema é uma das formas listadas de cumprir isso. À parte, o 2.2.2 Pausar, parar, ocultar, de nível A, cobre movimentos que começam sozinhos.
Como lido com redução de movimento no Tailwind?
Use a variante motion-safe: para aplicar uma animação só quando não há preferência definida, ou motion-reduce: para sobrescrever uma quando reduce está ativo, por exemplo motion-safe:animate-bounce.
Quais movimentos causam problemas
O problema é o movimento que ocupa grande parte da tela ou que se move em uma direção que o visitante não provocou: fundos com parallax, zooms de página inteira, trocas de página deslizando, elementos girando e conteúdo que pula enquanto você rola.
Feedback pequeno, rápido e iniciado pelo usuário, como a mudança de cor de um botão ou a marcação de um checkbox, raramente é um problema e geralmente pode ficar.
CSS sem movimento por padrão
Muitos sites adicionam uma query reduce no final que define todas as durações como quase zero. Funciona, mas é fácil esquecer uma animação, e alguns scripts escutam eventos animationend, que então disparam na hora.
Escrever o movimento dentro de uma query no-preference inverte o padrão. Quem tem um navegador que não informa preferência continua vendo o movimento, e tudo o que você esquecer cai na versão calma.
Scripts e bibliotecas
As queries CSS não alcançam animações iniciadas por JavaScript, canvas ou chamadas de rolagem suave. Verifique a media query antes de chamar element.animate() ou scrollIntoView com behavior: smooth.
Leia a configuração uma vez no início e assine o evento change, para que uma pessoa que a troque no meio da visita seja respeitada sem recarregar a página.
Padrões em CSS
Movimento como melhoria
O card só desliza para dentro quando não há preferência definida. Todos os outros veem um fade suave.
Uma rede de segurança para sites existentes
Útil quando você não consegue reescrever todas as animações. As durações viram quase zero em vez de none, então os eventos animationend e transitionend continuam disparando.
JavaScript e React
Ler a configuração e acompanhar mudanças
matchMedia retorna uma lista ao vivo. O evento change dela dispara quando o visitante troca a configuração.
Hook React: usePrefersReducedMotion
Começa como true no servidor para que nada anime antes de o navegador responder.
Pelo que trocar cada efeito
Alternativas reduzidas
Movimento completo
Versão reduzida
Fundo com parallax
Fundo estático
Troca de página deslizando ou com zoom
Cross-fade, ou troca instantânea
Elemento que entra voando na rolagem
Fade curto no lugar
Indicador de carregamento girando
Opacidade pulsando ou uma barra de progresso
Rolagem suave até uma âncora
Salto instantâneo
Vídeo de fundo com reprodução automática
Imagem de capa com botão de play
Sua configuração de movimento
O selo lê a configuração do seu dispositivo com matchMedia, e o seletor de prévia mostra a animação reduzida sem mudar o seu sistema.