Separe o feedback do espetáculo
Use o recurso de mídia prefers-reduced-motion para detectar a preferência do usuário no CSS e, quando necessário, aplique a mesma preferência aos efeitos controlados por script. Por exemplo, remova o zoom repetido do fundo, mas mantenha uma breve indicação de cor ou texto que sinalize uma ação bem-sucedida. Não transforme a redução de movimento em uma perda de informação difícil de perceber: os jogadores ainda precisam entender o que mudou e o que fazer em seguida.
Não remova todas as animações mecanicamente. Um alvo em movimento pode ser um elemento de jogo, enquanto o movimento da câmera após uma colisão pode ser decorativo. Preserve o movimento necessário para localização ou tempo e forneça outro sinal claro sempre que possível. O MDN explica que a preferência solicita a redução ou substituição de movimentos não essenciais.
Teste transições e efeitos repetidos
Revise os movimentos em toda a experiência: menus, carregamento, transições de câmera, vitória e derrota, além dos efeitos que se repetem durante uma partida longa. Uma configuração que desliga só uma animação CSS pode deixar de fora os movimentos feitos com JavaScript ou canvas. Aplique a preferência de forma consistente em todas as camadas visuais e evite mudanças bruscas se a configuração do sistema mudar durante o jogo.
Ative a configuração do sistema operacional para reduzir movimento e confira se os jogadores ainda conseguem localizar alvos, reconhecer acertos e entender as transições. Teste em conjunto os efeitos de CSS, os controlados por script e os do canvas. A MDN documenta o recurso de mídia e como oferecer um estilo alternativo quando a preferência está ativa.
Perguntas sobre movimento reduzido em jogos de navegador
O movimento reduzido deve interromper todos os movimentos em um jogo?
Não. Algum movimento é essencial para jogar ou comunicar o estado. Reduza ou substitua efeitos não essenciais e preserve uma forma clara de compreender o tempo, a localização e o feedback.
Como uma página detecta a preferência?
O CSS pode usar o recurso de mídia prefers-reduced-motion. Efeitos controlados por script ou desenhados no canvas precisam de um caminho equivalente para respeitar a preferência, mantendo a apresentação visual consistente.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção