3.4 Movimento e leitura

Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.

Ler é um ato motor. O olho não desliza suavemente ao longo da linha; ele salta em sacadas e pousa em fixações, e a compreensão acontece nos pousos. Qualquer coisa que se mova na página disputa esses pousos. O movimento é o sinal de atenção mais forte de que o sistema visual dispõe — um alarme evolutivo que não pode ser desligado por força de vontade —, e é por isso que elementos animados perto do texto são tão corrosivos para a leitura, e por que texto que se move por conta própria é quase ilegível.

A web moderna está saturada de movimento: animações de entrada, cenários em parallax, revelações acionadas pela rolagem, carrosséis que avançam sozinhos. Parte disso é ofício. Boa parte é decoração à custa do leitor. E, para um grupo de leitores, é pior que distração.

Distúrbios vestibulares: movimento como dano

Para pessoas com distúrbios vestibulares — condições do ouvido interno e do sistema de equilíbrio —, o movimento em tela pode desencadear tontura, náusea, vertigem e dores de cabeça que persistem muito depois de desviar o olhar. Os gatilhos são específicos e bem descritos pelos usuários afetados: elementos grandes deslizando pelo viewport, efeitos de zoom e escala, camadas de parallax movendo-se em velocidades diferentes e animação vinculada à rolagem que dissocia o que o olho vê do que a mão fez. Isso não é incômodo; é uma reação física, mais próxima do enjoo de movimento do que do desagrado. Uma página pode deixar um leitor doente.

A WCAG trata disso no 2.3.3 (Animação a partir de Interações): a animação de movimento acionada por interação deve poder ser desativada, a menos que a animação seja essencial. É um critério AAA, o que subestima sua importância — para a população afetada, isso não é um aprimoramento, mas a diferença entre utilizável e inutilizável.

O interruptor do leitor: prefers-reduced-motion

Todo sistema operacional relevante oferece hoje uma configuração de "reduzir movimento", e a media query prefers-reduced-motion a expõe a folhas de estilo e scripts. Respeitá-la é uma exigência dura da prática responsável, não um aprimoramento progressivo, por uma razão simples: as pessoas que a ativaram o fizeram porque o movimento lhes faz mal. Ignorar a configuração é ignorar uma acomodação médica declarada.

Respeitá-la bem significa mais do que desligar animações:

• Substitua movimento por opacidade. Um fade comunica "isto apareceu" sem transladar nada pela tela; cross-fades são amplamente tolerados onde deslizamentos e zooms não são.
• Desative parallax e efeitos vinculados à rolagem por completo sob movimento reduzido — não existe versão reduzida de parallax que valha a pena manter.
• Aplique a preferência também na animação guiada por JavaScript, não só no CSS; a media query pode ser consultada a partir de script, e bibliotecas de animação podem ser condicionadas a ela.
• Não interprete "reduzir" como "remover toda mudança de estado". Transições instantâneas também podem desorientar; o objetivo é eliminar o movimento espacial gratuito, não o feedback.

Texto em movimento é texto ilegível

Texto que rola, corre em letreiro, desliza ou pisca derrota de vez a maquinaria de sacadas e fixações. Leitores com baixa visão, leitores que usam ampliação (para quem um alvo em movimento pode sair da região ampliada no meio de uma palavra), leitores com dislexia ou dificuldades de atenção e leitores que simplesmente leem devagar são todos punidos de forma desproporcional: o texto vai embora antes que eles o terminem.

O 2.2.2 da WCAG (Pausar, Parar, Ocultar) — um critério de nível A, o patamar mais baixo e menos negociável — exige que qualquer conteúdo em movimento, piscante ou rolante que inicie automaticamente e dure mais de cinco segundos tenha um mecanismo para pausá-lo, pará-lo ou ocultá-lo. O infrator mais comum, de longe, é o carrossel de avanço automático, especialmente o que carrega texto. Um carrossel que gira por temporizador garante que alguns leitores nunca terminem um slide; o controle de "pausa", quando existe, é rotineiramente minúsculo, sem rótulo ou descobrível apenas depois da frustração que deveria ter evitado. Se o conteúdo importa, ele merece quietude. Se gira automaticamente, o design já admitiu que ele não importa — e ele deveria avançar somente sob o controle do leitor.

Efeitos de texto acionados pela rolagem merecem suspeita particular: parágrafos que surgem em fade ao entrar no viewport, manchetes montadas letra a letra, texto fixado enquanto fundos rolam. Cada um insere uma animação entre o leitor e as palavras. O leitor chegou para ler; faça as palavras estarem lá.

Movimento que respeita a leitura

Nada disso é um argumento por uma web estática. O movimento tem trabalho legítimo: indicar que uma ação foi registrada, mostrar para onde foi um painel dispensado, atrair o olho para uma mudança que de outro modo passaria despercebida. O movimento a esse serviço é breve, pequeno, infrequente e nunca aplicado ao texto corrido. Um conjunto útil de testes:

• O movimento transmite algo de que o leitor precisa, ou decora algo de que o designer gosta?
• Ele está perto de — ou sobre — um texto que alguém está lendo neste momento?
• Ele executa uma vez, brevemente, ou fica em loop?
• Ele respeita prefers-reduced-motion por completo?

Breve, com propósito, longe do texto corrido, respeitoso com o usuário: o movimento que passa nesses testes merece seu lugar.

Por que este capítulo é novo

A primeira edição antecedeu as condições que tornam este capítulo necessário. Em 2005, o CSS não sabia animar; movimento sério exigia Flash, e sua conversa sobre acessibilidade girava em torno de piscadas e risco de convulsão, não de dano vestibular. A query prefers-reduced-motion só apareceu nos navegadores em 2017, o 2.3.3 da WCAG chegou com a versão 2.1 em 2018, e o estilo de casa saturado de animações acionadas por rolagem da web moderna é mais jovem que isso. O movimento ficou barato; a disciplina da contenção é o que estas diretrizes agora podem acrescentar.

No CSS

/* Default: entrance combines movement and fade */
.reveal {
  animation: slide-fade-in 300ms ease-out;
}

@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: fade-in 200ms ease-out;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Coarse safety net for unaudited animation — a last
   resort, not the practice; it also removes the fades
   and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Recomendações

• Respeite prefers-reduced-motion em toda parte — CSS e JavaScript — como exigência dura.
• Sob movimento reduzido, substitua deslizamentos e zooms por fades; remova parallax e efeitos vinculados à rolagem por completo.
• Nunca anime o texto corrido. Leitura e movimento são inimigos.
• Cumpra o 2.2.2 da WCAG: qualquer coisa que se mova automaticamente por mais de cinco segundos precisa de um controle visível para pausar, parar ou ocultar.
• Evite carrosséis de avanço automático para conteúdo relevante; se um existir, deixe o leitor conduzi-lo.
• Mantenha o movimento com propósito breve, pequeno e sem loop, e mantenha-o longe do texto sendo lido.
• Teste as páginas principais com a configuração de reduzir movimento do sistema ativada; trate qualquer animação espacial sobrevivente como um bug.

Leituras adicionais

• MDN: prefers-reduced-motion
• web.dev: prefers-reduced-motion
• WCAG 2.2 Understanding: 2.3.3 Animation from Interactions
• WCAG 2.2 Understanding: 2.2.2 Pause, Stop, Hide