Simular movimento reduzido

A animação CSS pode ser um problema de acessibilidade. Os sistemas operativos lidam com este problema ao incluir uma opção para desativar as animações para evitar confusões dos utilizadores e potenciais problemas relacionados com a saúde, como desencadear convulsões.

Numa página Web, pode utilizar a consulta de suporte de dados CSS de movimento reduzido preferencial para detetar a preferência do utilizador por animações. Em seguida, coloque o código de animação num teste para executar animações condicionalmente. Por exemplo:

header {
  /* The header element is animated */
  animation: slidein 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* The user prefers reduced motion */
  .header {
    /* Turn off the animation for the header element */
    animation: none;
  }
}

Para testar se o código funciona conforme esperado, sem ter de alterar a definição do sistema operativo, simule a definição de movimento reduzido do sistema operativo em DevTools:

1. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, prima Ctrl+Shift+P (Windows/Linux) ou Comando+Shift+P (macOS) para abrir o Menu de Comandos.

3. Comece a escrever reduzido, selecione a opção Emular CSS prefers-reduced-motion e, em seguida, prima Enter:

   

4. Atualize a página Web e marcar se as animações são executadas.

Confira também

• Verifique se a página é utilizável com a animação de IU desativada – instruções com uma página de demonstração.