Prefers reduced motion: animação que todo mundo pode usar

Prefers reduced motion, escrito prefers-reduced-motion em CSS, é um recurso de mídia que avisa ao seu site que a pessoa pediu ao aparelho para reduzir movimentos não essenciais. Quando ele informa reduce, você deve acalmar a página: parar os loops automáticos, trocar deslizes, zooms e parallax por esmaecimentos suaves ou por nada e mostrar versões paradas dos fundos animados. É pouco trabalho, e torna o site usável para pessoas que, de outra forma, sairiam dele passando mal.

Para quem é o movimento reduzido

Algumas pessoas têm distúrbios vestibulares, que afetam o ouvido interno e a percepção de equilíbrio e movimento do cérebro. Para elas, movimentos grandes na tela, sobretudo parallax, zoom e elementos deslizando por áreas grandes, podem provocar tontura, náusea, dor de cabeça ou desorientação. Outras acham o movimento constante distrativo, têm enxaqueca ou simplesmente preferem uma tela mais calma. Todas usam a mesma chave nas configurações do aparelho, e não deveriam ter que explicar por quê.

O que reduzir e o que pode ficar

Movimento reduzido não é o mesmo que nenhum movimento. O objetivo é remover o movimento que simula deslocamento pelo espaço ou ocupa grandes partes da tela e parar tudo o que toca sozinho. Respostas pequenas e rápidas e esmaecimentos simples geralmente não têm problema, e muitas vezes ajudam as pessoas a entender o que mudou.

Sempre que puder, substitua em vez de apagar. Se um painel normalmente desliza pela lateral, deixe-o aparecer com um esmaecimento. Se o banner principal toca um loop, mostre um quadro parado dele. O design fica intacto; só o deslocamento some.

Como respeitar prefers-reduced-motion em CSS

A abordagem mais robusta é tratar o movimento como um aprimoramento. Escreva primeiro o design parado e depois acrescente o movimento dentro de uma media query que só vale quando a pessoa não tem preferência. Se a query não for suportada ou a configuração estiver ativa, a página simplesmente fica parada. A página da MDN sobre prefers-reduced-motion documenta o recurso.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Movimento reduzido em JavaScript, vídeo e canvas

O movimento controlado por scripts, como efeitos de rolagem, fundos em canvas ou WebGL e vídeo, precisa de uma verificação em JavaScript. Leia a configuração com matchMedia e escute as mudanças, porque as pessoas podem alterá-la com a sua página aberta.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Vídeos de fundo e gradientes ao vivo são os culpados mais comuns, porque tocam sozinhos. Os guias de vídeo de fundo em sites e de gradientes shader mostram onde a verificação deve ficar.

O que a WCAG diz sobre movimento

Três critérios de sucesso das Diretrizes de Acessibilidade para Conteúdo Web tratam de movimento. O suporte ao movimento reduzido é a forma prática de atender ao primeiro; um controle de pausa resolve o segundo.

Como criar versões paradas que continuam bonitas

A versão parada não deve parecer uma versão quebrada. Para fundos animados, escolha o quadro que fica melhor sozinho, e não qualquer quadro que por acaso seja o primeiro. Para entradas, garanta que o layout final esteja completo sem elas. Para loops feitos com um material da marca, um quadro parado bem escolhido do mesmo material mantém a identidade intacta. Os princípios de motion design sugerem testar cada animação com um único quadro pausado por esse motivo.

O Gradiently segue a mesma regra: os Marks ao vivo no app ficam parados quando o seu aparelho pede movimento reduzido, e qualquer design que você exporta como loop também pode ser exportado como um PNG parado do mesmo Mark, para lugares onde o movimento não é bem-vindo. Em posts sociais, onde não dá para detectar a configuração, a abordagem mais gentil é um movimento lento e suave; veja fundos gradientes animados.

1. 1

   Ative a configuração

   Ative reduzir movimento no seu sistema operacional e recarregue o site.

2. 2

   Confira tudo o que se move

   Banners, carrosséis, efeitos de rolagem, vídeos, canvas e estados de carregamento devem estar todos calmos.

3. 3

   Mude a configuração com a página aberta

   Os seus scripts devem acompanhar a mudança sem recarregar.

4. 4

   Simule nas ferramentas de desenvolvedor

   O Chrome e o Firefox conseguem simular o recurso de mídia, o que é mais rápido enquanto você trabalha.

5. 5

   Olhe o design parado

   Garanta que a versão reduzida pareça intencional e completa, e não algo que falhou ao carregar.