Prefers reduced motion: animação que todos podem usar

O prefers reduced motion, escrito prefers-reduced-motion em CSS, é uma media feature que diz ao teu site que um visitante pediu ao dispositivo para minimizar o movimento não essencial. Quando devolve reduce, deves acalmar a página: parar os loops em reprodução automática, substituir deslizes, zooms e parallax por esbatidos suaves ou por nada, e mostrar versões paradas dos fundos animados. É pouco trabalho e torna um site utilizável para pessoas que, de outra forma, o deixariam a sentir-se mal.

Para quem é a redução de movimento

Algumas pessoas têm perturbações vestibulares, que afetam o ouvido interno e o sentido de equilíbrio e de movimento do cérebro. Para elas, um movimento grande no ecrã, sobretudo parallax, zoom e elementos a deslizar por áreas grandes, pode provocar tonturas, náuseas, dores de cabeça ou desorientação. Outras acham o movimento constante distrativo, têm enxaquecas ou simplesmente preferem um ecrã mais calmo. Todas usam o mesmo interruptor nas definições do dispositivo, e não deviam ter de explicar porquê.

O que reduzir e o que pode ficar

Reduzir movimento não é o mesmo que eliminar o movimento. O objetivo é retirar o movimento que simula uma viagem pelo espaço ou que ocupa grandes partes do ecrã, e parar tudo o que se reproduz sozinho. As respostas pequenas e rápidas e os esbatidos simples são geralmente aceitáveis, e muitas vezes ajudam as pessoas a perceber o que mudou.

Sempre que possível, substitui em vez de apagar. Se um painel normalmente desliza de lado, deixa-o antes aparecer com um esbatido. Se o cabeçalho reproduz um loop, mostra uma imagem parada dele. O design fica intacto; só a deslocação desaparece.

Como respeitar o prefers-reduced-motion em CSS

A abordagem mais robusta é tratar o movimento como uma melhoria. Escreve primeiro o design parado e depois acrescenta movimento dentro de uma media query que só se aplica quando o visitante não tem preferência. Se a query não for suportada ou a definição estiver ativa, a página fica simplesmente parada. A página do MDN sobre o prefers-reduced-motion documenta a funcionalidade.

/* 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%; }
}

Redução de movimento em JavaScript, vídeo e canvas

O movimento controlado por scripts, como efeitos de scroll, fundos em canvas ou WebGL e vídeo, precisa de uma verificação em JavaScript. Lê a definição com matchMedia e escuta as alterações, porque as pessoas podem mudá-la com a tua 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()

Os vídeos de fundo e os gradientes ao vivo são os casos mais frequentes, porque se reproduzem sozinhos. Os fundos de vídeo em sites e os gradientes com shaders mostram onde deve ficar a verificação.

O que diz a WCAG sobre movimento

Três critérios de sucesso das Diretrizes de Acessibilidade para o Conteúdo da Web tratam do movimento. O suporte à redução de movimento é a forma prática de cumprir o primeiro; um controlo de pausa trata do segundo.

Desenhar versões paradas que continuam bonitas

A versão parada não deve parecer uma versão avariada. Nos fundos animados, escolhe a imagem que fica melhor sozinha, não a que calhar ser a primeira. Nas entradas, garante que a composição final fica completa sem elas. Nos loops feitos a partir de uma matéria de marca, uma imagem parada bem escolhida da mesma matéria mantém a identidade intacta. Os princípios de motion design sugerem testar cada animação com uma única imagem em pausa por esta razão.

A Gradiently segue a mesma regra: os Marks ao vivo na aplicação ficam parados quando o teu dispositivo pede redução de movimento, e qualquer design que exportes como loop também pode ser exportado como PNG parado do mesmo Mark, para os sítios onde o movimento não é bem-vindo. Nas publicações para redes sociais, onde não consegues detetar a definição, a abordagem mais gentil é um movimento lento e suave; vê os fundos em gradiente animado.

1. 1

   Ativa a definição

   Ativa a redução de movimento no teu sistema operativo e recarrega o site.

2. 2

   Verifica tudo o que se move

   Cabeçalhos, carrosséis, efeitos de scroll, vídeos, canvas e estados de carregamento devem estar todos calmos.

3. 3

   Muda-a com a página aberta

   Os teus scripts devem acompanhar a alteração sem recarregar.

4. 4

   Emula-a nas ferramentas de programador

   O Chrome e o Firefox conseguem emular a media feature, o que é mais rápido enquanto trabalhas.

5. 5

   Olha para o design parado

   Garante que a versão reduzida parece intencional e completa, e não algo que falhou a carregar.