Movimento acessível: projetando para preferir movimento reduzido sem perder o significado
Como projetar um movimento que respeite as configurações de movimento reduzido e distúrbios vestibulares: o que o WCAG exige, o que remover, o que manter e como testar.
Ponto principal
Quando um usuário ativa o movimento reduzido, mantenha o significado de cada animação, mas remova o movimento: substitua slides, zooms e paralaxes por fades curtos ou alterações instantâneas, pare os loops de reprodução automática e nunca confie apenas no movimento para comunicar algo. Na web, detecte a configuração com a consulta de mídia prefere movimento reduzido.
Por que isso importa
Para algumas pessoas, o movimento na tela não é uma questão de gosto. O W3C observa que a animação pode desencadear distúrbios vestibulares, com reações que incluem náusea, enxaqueca e, em casos graves, necessidade de repouso no leito para recuperação. Os sistemas operacionais permitem que as pessoas solicitem menos movimento e, na web, essa solicitação é exposta como a consulta de mídia prefere movimento reduzido. Seu valor é reduzido quando o usuário ativa a configuração.
O que WCAG pede
Dois critérios de sucesso WCAG abrangem o movimento. 2.2.2 Pausar, Parar, Ocultar aplica-se a movimentos que iniciam automaticamente, como carrosséis e animações em loop, e requerem uma forma de pausar, parar ou ocultá-los. 2.3.3 Animação de interações (nível AAA) aplica-se ao movimento desencadeado pela interação do usuário e sugere evitar animações desnecessárias, oferecendo um controle para desligá-la ou usando a configuração de redução de movimento do sistema operacional. Mesmo quando a AAA não é exigida, segui-la é uma boa prática.
Remova o movimento, mantenha o significado
Movimento reduzido não significa ausência de feedback. Um usuário que pressiona um botão ainda precisa saber que funcionou. O objetivo é manter a mudança de estado e abandonar as viagens.
- Remova ou reduza: slides grandes, zooms, paralaxe, movimento vinculado à rolagem, rotação, loops de reprodução automática e vídeo de fundo.
- Manter: alterações de cor e opacidade, indicadores de foco, transições curtas de estado, informações de progresso.
- Substituir: transições de página e painel por um cross-fade curto ou uma mudança instantânea.
- Nunca: use o movimento como única forma de mostrar um erro, uma alteração ou um novo item.
Implementando
Na web, envolva movimento não essencial em @media (prefere movimento reduzido: sem preferência) ou substitua-o dentro de @media (prefere movimento reduzido: reduza). Em JavaScript, leia window.matchMedia('(prefers-reduced-motion: reduz)') e ouça as alterações. As plataformas nativas expõem a mesma configuração: SwiftUI, UIKit e Android permitem que você verifique. Se o seu sistema de design tiver tokens de movimento, defina uma variante reduzida para cada um para que cada componente se comporte da mesma maneira.
Teste
Ative o movimento reduzido em seu sistema operacional e percorra cada fluxo principal. Verifique se nada importante foi perdido, se nenhum loop foi iniciado automaticamente e se a rolagem não move o conteúdo além do que a própria rolagem faz. As ferramentas de desenvolvedor do navegador também podem emular a configuração.
Trecho de implementação em produção
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Princípios-chave para lembrar
- O movimento pode deixar algumas pessoas fisicamente doentes; respeite a configuração
- Remova deslocamento, zoom, paralaxe e reprodução automática; manter mudanças de estado e feedback
- WCAG 2.2.2 cobre movimento automático; 2.3.3 cobre o movimento da interação
- Detecte a configuração com preferência de movimento reduzido e em cada plataforma nativa
- Projete uma variante reduzida para cada token de movimento
Perguntas frequentes
Fontes
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Documentos da Web MDN
- Motion — Diretrizes de interface humana da Apple