Verifique se uma página é utilizável com a animação de IU desativada

Uma página Web não deve mostrar animações a um utilizador que desativou as animações no sistema operativo. As animações podem ajudar a usabilidade de um produto, mas também podem causar distração, confusão ou náuseas.

Para marcar que uma página Web é utilizável com a animação de IU desativada (movimento reduzido), na ferramenta Composição, utilize a lista pendente Emular multimédia CSS preferível de movimento reduzido.

Na página Web de demonstração de teste de acessibilidade, quando desativa animações no sistema operativo ou emula as definições com DevTools, a página Web não utiliza deslocamento suave quando seleciona as ligações do menu de navegação da barra lateral. Isto é conseguido ao encapsular a definição de deslocamento suave no CSS numa consulta multimédia e, em seguida, ao utilizar a ferramenta de Composição para emular a definição do sistema operativo para animação reduzida.

Para marcar se a página é utilizável com animações desativadas:

1. Abra a página Web de demonstração de teste de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. O DevTools é aberto junto à página Web.

3. Em DevTools, na Barra de Atividade, selecione o separador Origens . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

4. No painel navegação da ferramenta Origens à esquerda, selecione styles.css. O ficheiro CSS é apresentado no painel Editor .

5. Prima Ctrl+F no Windows/Linux ou Comando+F no macOS e, em seguida, introduza @media. É apresentada a seguinte consulta de multimédia CSS, que confirma que é utilizada na página Web:

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

Emular a definição do sistema operativo para reduzir a animação

Para emular a definição do sistema operativo para reduzir a animação:

1. Prima Esc para abrir o painel Vista Rápida na parte inferior de DevTools. Clique no botão Mais ferramentas () na barra de ferramentas Vista Rápida para ver a lista de ferramentas e, em seguida, selecione Composição.

2. Na lista pendente Emular multimédia CSS prefers-reduced-motion , selecione prefers-reduced-motion: reduced.

   

3. Na página Web, clique nos itens de menu azuis, como Cavalos ou Alpacas. Agora, a página Web desloca-se instantaneamente para a secção selecionada, em vez de utilizar a animação de deslocamento suave.

4. Na ferramenta Composição , abaixo de Emular a funcionalidade de multimédia CSS prefere-reduzir movimento, selecione Sem emulação para remover esta definição.

Repare que a página Web de demonstração ainda executa as seguintes animações, mesmo com as definições de emulação e consulta multimédia acima. Ao criar o seu site, certifique-se de que corrige todas as animações semelhantes:

• Animação dos itens de menu azuis quando paira o cursor sobre os mesmos.
• Animação dos círculos nas ligações Mais quando paira o cursor sobre os mesmos.

Confira também

• Simulação de movimento reduzido