Verifique se uma página é utilizável com a animação da interface do usuário desativada

Uma página da Web não deve mostrar animações para um usuário que desativou as animações no sistema operacional. As animações podem ajudar na usabilidade de um produto, mas também podem causar distração, confusão ou náusea.

Para marcar se uma página da Web é utilizável com a animação da interface do usuário desativada (movimento reduzido), na ferramenta Renderização, use a lista suspensa Emular recurso de mídia CSS prefers-reduced-motion.

Na página da Web de demonstração de teste de acessibilidade, quando você desativa as animações no sistema operacional ou emula essas configurações usando o DevTools, a página da Web não usa a rolagem suave quando você seleciona os links do menu de navegação da barra lateral. Isso é feito envolvendo a configuração de rolagem suave em CSS em uma consulta de mídia e, em seguida, usando a ferramenta Renderização para emular a configuração do sistema operacional para animação reduzida.

Para marcar se a página pode ser usada com as animações desativadas:

  1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

  2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. O DevTools é aberto ao lado da página da Web.

  3. No DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas (ícone de Mais ferramentas).

  4. No painel de navegação da ferramenta Fontes à esquerda, selecione styles.css. O arquivo CSS aparece no painel Editor .

  5. Pressione Ctrl+F no Windows/Linux ou Command+F no macOS e Enter @media. A seguinte consulta de mídia CSS é exibida, o que confirma que ela é usada na página da Web:

    @media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Emular a configuração do sistema operacional para reduzir a animação

Para emular a configuração do sistema operacional para reduzir a animação:

  1. Pressione Esc para abrir o painel Visualização Rápida na parte inferior do DevTools. Clique no botão Mais ferramentas (o ícone Mais ferramentas) na barra de ferramentas Visualização rápida para ver a lista de ferramentas e selecione Renderização.

  2. Na lista suspensa Emular recurso de mídia CSS prefers-reduced-motion , selecione prefers-reduced-motion: reduced.

    Simulando movimento reduzido e o CSS que garante que a rolagem suave só aconteça quando o usuário quiser

  3. Na página da web, clique nos itens do menu azul, como Cavalos ouAlpacas. Agora, a página da Web rola instantaneamente para a seção selecionada, em vez de usar a animação de rolagem suave.

  4. Na ferramenta Renderização , abaixo de Emular recurso de mídia CSS prefers-reduced-motion, selecione Sem emulação para remover essa configuração.

Observe que a página da Web de demonstração ainda executa as animações a seguir, mesmo com as configurações de consulta e emulação de mídia acima. Ao criar seu site, certifique-se de corrigir todas as animações semelhantes:

  • Animação dos itens do menu azul quando você passa o mouse sobre eles.
  • Animação dos círculos nos links Mais quando você passa o mouse sobre eles.

Confira também

  • Last updated on