Animações Acessíveis com prefers-reduced-motion
Respeite as necessidades de acessibilidade desativando ou reduzindo animações para usuários sensíveis a movimento.
Animações Acessíveis com prefers-reduced-motion é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Por que reduzir o movimento?
Algumas pessoas têm distúrbios vestibulares, epilepsia ou outras condições que tornam as animações prejudiciais. O CSS fornece a consulta de mídia prefers-reduced-motion para detectar e respeitar a preferência configurada no sistema.
A consulta de preferência por movimento reduzido
Valores da consulta:
no-preference— a pessoa não expressou uma preferênciareduce— a pessoa ativou a redução de movimento nas configurações do OS
<div class="box"></div>
A opção nuclear (não recomendada)
Uma implementação comum, mas rudimentar, que elimina todas as animações. Ela também remove indicações de movimento úteis e não desorientadoras:
<div class="box"></div>
Melhor: movimento com ativação explícita
Um padrão mais seguro: defina animações apenas para pessoas sem preferência de movimento, deixando o estado padrão sem movimento:
<button class="btn">Button</button>
<div class="card">Card</div>
Trocar os tipos de animação
Substitua movimentos desorientadores (transformação, escala, rotação) por alternativas acessíveis (opacidade, cor) para pessoas que preferem movimento reduzido:
<div class="card demo-hover">Hover me</div>
Animações infinitas
Animações infinitas (indicadores giratórios, pulsações) são especialmente problemáticas. Forneça uma alternativa estática:
<div class="spinner"></div>
Efeitos de paralaxe
A rolagem em paralaxe pode causar enjoo intenso. Desative-a sempre para pessoas que preferem movimento reduzido:
<div class="parallax">Parallax section</div>
Acesso por JavaScript
Verifique a preferência em JavaScript ao usar a API de animações da Web ou bibliotecas de rolagem:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG e movimento
A WCAG 2.3.3 (AAA) exige que animações acionadas por interação possam ser desativadas. Usar prefers-reduced-motion é a abordagem CSS recomendada para atender a esse critério.
Testando o movimento reduzido
Na guia Renderização do Chrome DevTools, ative "Emular CSS prefers-reduced-motion: reduce" para testar sem alterar as configurações do OS. No macOS: Preferências do Sistema → Acessibilidade → Reduzir Movimento.
Documente a intenção
Comente as animações para explicar se elas são funcionais ou apenas decorativas. Animações funcionais (que indicam um processo ou progresso) devem ter alternativas acessíveis; as decorativas podem simplesmente ser removidas.
Verificação rápida
Qual abordagem lida melhor com a preferência por movimento reduzido em um efeito de elevação de um cartão ao passar o cursor?
Resumo
Use prefers-reduced-motion: reduce para detectar sensibilidade ao movimento. Em vez de eliminar todas as animações, forneça um padrão sem movimento e ative o movimento apenas dentro de consultas no-preference. Substitua animações de transformação desorientadoras por transições de opacidade ou cor para pessoas que preferem movimento reduzido. Faça testes com a emulação do DevTools.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Animações Acessíveis com prefers-reduced-motion” é grátis?
Sim — o texto completo de “Animações Acessíveis com prefers-reduced-motion” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Animações Acessíveis com prefers-reduced-motion”?
Respeite as necessidades de acessibilidade desativando ou reduzindo animações para usuários sensíveis a movimento. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Animações Acessíveis com prefers-reduced-motion”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe de @keyframes e Propriedade de Animação
- Direção, Fill-Mode e Iteração de Animações
- Encadeamento e Sequenciamento de Animações
- Animações Acessíveis com prefers-reduced-motion