Respeitando prefers-reduced-motion
Detecte a consulta de mídia prefers-reduced-motion e desative ou reduza as animações para usuários que solicitaram menos movimento.
Respeitando prefers-reduced-motion é uma aula grátis de Frontend 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O recurso de mídia prefers-reduced-motion
Algumas pessoas sentem náusea, tontura ou convulsões causadas por movimentos nas interfaces. Elas configuram o próprio OS para reduzir o movimento. O recurso de mídia prefers-reduced-motion detecta essa preferência para que o CSS possa responder a ela.
Detectando movimento reduzido no CSS
Envolva as animações na consulta oposta: aplique as animações normalmente e depois substitua ou desative-as para pessoas que preferem menos movimento.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}O princípio de reduzir, não eliminar
prefers-reduced-motion: reduce não significa ausência total de movimento. Alguns movimentos comunicam alterações importantes no estado da interface. Em vez de remover as animações completamente, desacelere-as ou simplifique-as para transições graduais.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}A opção radical: desativar todas as animações
Um padrão comum é desativar globalmente todas as transições e animações para pessoas que preferem movimento reduzido. Essa é uma base segura, mesmo quando nem todas as animações foram ajustadas individualmente.
@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;
}
}Detectando movimento reduzido no JavaScript
Utilize a API matchMedia para detectar a preferência no JavaScript — isso é útil para controlar animações em canvas, movimentos controlados por JavaScript ou a reprodução automática de vídeos.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Comportamento de rolagem e reprodução automática
Também desative a rolagem suave para pessoas que preferem movimento reduzido: scroll-behavior: auto. Interrompa a reprodução automática de vídeos. Não faça o conteúdo piscar nem oscilar rapidamente.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — animação decorrente de interações
A WCAG 2.3.3 (nível AAA) exige que seja possível desativar movimentos acionados pela interação da pessoa usuária. Ao respeitar prefers-reduced-motion, você atende a esse critério e melhora a acessibilidade para pessoas com distúrbios vestibulares.
Testando o movimento reduzido
No Chrome DevTools: abra o painel de renderização (menu de três pontos → Mais ferramentas → Renderização) e ative a opção 'Emular o recurso de mídia CSS prefers-reduced-motion'. Teste sua interface nesse modo antes de disponibilizá-la.
Prática: padrão de animação segura
Uma animação segura para movimento é aplicada por padrão e encapsulada de modo que possa ser facilmente desativada globalmente.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}A animação de foco deve permanecer
Os indicadores de foco (o contorno que mostra qual elemento está em foco) NÃO devem ser removidos, mesmo para pessoas que preferem movimento reduzido. Eles são essenciais para a navegação pelo teclado e normalmente não desencadeiam reações vestibulares.
Bibliotecas e prefers-reduced-motion
Bibliotecas de animação populares (Framer Motion, GSAP, Anime.js) oferecem suporte integrado a movimento reduzido. O gancho useReducedMotion() do Framer Motion facilita a desativação condicional de animações complexas no React.
Verificação rápida
Qual recurso de mídia CSS detecta a preferência de uma pessoa por ver menos movimento na interface?
Recapitulação: movimento reduzido
Algumas pessoas precisam de menos movimento por razões relacionadas à saúde vestibular e neurológica. Utilize @media (prefers-reduced-motion: reduce) para desativar ou simplificar animações. Detecte essa preferência no JS com matchMedia. A opção radical é definir globalmente a duração da animação e da transição como 0.01ms. A WCAG 2.3.3 recomenda essa prática. Faça testes com o painel de renderização do DevTools.
Perguntas Frequentes
A aula “Respeitando prefers-reduced-motion” é grátis?
Sim — o texto completo de “Respeitando 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Respeitando prefers-reduced-motion”?
Detecte a consulta de mídia prefers-reduced-motion e desative ou reduza as animações para usuários que solicitaram menos movimento. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 “Respeitando 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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Propriedades personalizadas CSS: declaração e atualização
- Transições: propriedade duração temporização
- Animações com @keyframes
- Respeitando prefers-reduced-motion