prefers-reduced-motion em CSS e JS
Detecte e respeite a configuração de movimento da pessoa.
prefers-reduced-motion em CSS e JS é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 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 Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Uma configuração que você pode ler
Os sistemas operacionais permitem que as pessoas peçam menos movimento. A funcionalidade de mídia prefers-reduced-motion expõe essa escolha diretamente ao seu site. 🎚️
Onde os usuários ativam essa opção
As pessoas ativam reduce motion nas configurações do sistema operacional em macOS, iOS, Windows e Android. Seu trabalho é ouvir, não questionar essa escolha.
Dois valores
A funcionalidade informa um de dois estados. Ela pode ser reduce, o que significa reduzir as animações, ou no-preference para todas as outras pessoas.
Consulte no CSS
Coloque os estilos que acalmam o movimento dentro de uma consulta de mídia. Quando um usuário pede para reduce motion, você pode reduzir as transições a quase nada.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Reduza, não remova sempre
Acalmar o movimento não significa congelar a página. Troque um grande deslizamento por um fade suave, para que a interface continue viva sem nunca dar solavancos.
Projete primeiro com movimento ativado
Crie os estilos animados normais e depois adicione a consulta para reduzi-los. Essa abordagem progressiva mantém a experiência padrão rica.
Leia no JavaScript
Para animações controladas por scripts, consulte diretamente o navegador. matchMedia informa se o usuário prefere movimento reduzido neste momento.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Reaja às alterações em tempo real
As pessoas podem alternar a configuração durante a sessão. Escute as alterações para que suas animações em JavaScript respeitem a nova preferência sem recarregar a página.
mq.addEventListener('change', e => updateMotion(e.matches));Cubra o comportamento da rolagem
A rolagem suave também conta como movimento. Dentro da consulta, defina scroll-behavior como auto para que os saltos sejam instantâneos para quem solicitou isso.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}É uma necessidade real
Isso não é uma opção supérflua. Para alguns usuários, movimentos grandes causam náusea ou tontura reais, portanto respeitar o pedido é importante.
Desativado por padrão é mais seguro
Quando não tiver certeza, adote o caminho mais seguro como padrão. Preferir um movimento calmo não prejudica ninguém e deixa a página confortável para todos.
Verificação rápida
Como um site descobre que um usuário quer menos movimento?
Recapitulação
Leia prefers-reduced-motion no CSS ou com matchMedia e acalme as animações em vez de eliminar a página. Respeite também as alterações feitas em tempo real. ✅
Aprenda HTML 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
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “prefers-reduced-motion em CSS e JS” é grátis?
Sim — o texto completo de “prefers-reduced-motion em CSS e JS” é 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 Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “prefers-reduced-motion em CSS e JS”?
Detecte e respeite a configuração de movimento da pessoa. Você pratica Web Accessibility 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 Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility 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 1 de 4.
Quanto tempo leva a aula “prefers-reduced-motion em CSS e JS”?
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 Web Accessibility Academy?
Sim. Cada aula de Web Accessibility 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
- prefers-reduced-motion em CSS e JS
- Distúrbios vestibulares e riscos da paralaxe
- O limite de três flashes para convulsões
- Pausar, parar e ocultar conteúdo em movimento automático