Animação e movimento

Você já andou em um carro, barco ou avião e de repente sentiu o mundo girar? Ou teve uma enxaqueca tão ruim que animações no smartphone ou tablet, criadas para "encantar" você, de repente o deixaram enjoado? Ou talvez você sempre teve sensação com todos os tipos de movimento? Estes são exemplos de diferentes tipos de distúrbios vestibulares.

Aos 40 anos, mais de 35% dos adultos terão algum tipo de disfunção vestibular. Isso pode levar a um período de tontura temporária, vertigem induzida por enxaqueca ou uma deficiência vestibular mais permanente.

Além de causar vertigem, muitas pessoas consideram que o conteúdo em movimento, piscando ou rolando é uma distração. Pessoas com TDAH e outros transtornos de déficit de atenção podem se distrair tanto com seus elementos animados que se esquecem do motivo pelo qual acessaram seu site ou app.

Neste módulo, veremos algumas das maneiras de ajudar melhor as pessoas com todos os tipos de distúrbios acionados pelo movimento.

Como atualizar e mover conteúdo

Ao criar animações e movimentos, pergunte a si mesmo se o movimento do elemento é excessivo. Por exemplo, cores piscando de escuro para claro ou movimentos rápidos na tela podem causar convulsões em pessoas com epilepsia fotossensível. Estima-se que 3% das pessoas com epilepsia sofrem de fotossensibilidade, que é mais comum em mulheres e jovens.

As diretrizes sobre atualização das WCAG recomendam o seguinte:

• Pisca mais de três vezes em um segundo
• Pisca abaixo do limite geral de flash e do flash vermelho.

Esses flashes podem, na melhor das hipóteses, causar a incapacidade de usar uma página da Web ou, pior, levar a doenças.

Para qualquer movimento extremo, é fundamental que você o teste usando a Ferramenta de análise de epilepsia fotossensível (PEAT, na sigla em inglês). A PEAT é uma ferramenta sem custo financeiro que identifica se o conteúdo, o vídeo ou as animações da tela têm probabilidade de causar convulsões. Nem todo conteúdo precisa ser avaliado pela PEAT, mas conteúdos que contêm luzes piscando ou transições rápidas entre cores de fundo claras e escuras precisam ser avaliados por segurança.

Outra pergunta que você deve fazer a si mesmo sobre animação e movimento é se o movimento do elemento é essencial para entender o conteúdo ou as ações na tela. Se não for essencial, considere remover todo o movimento, até mesmo micromovimentos, do elemento que você está construindo ou projetando.

Suponha que você acredite que o movimento do elemento não seja essencial, mas possa melhorar a experiência geral do usuário, ou que não seja possível remover o movimento por outro motivo. Nesse caso, siga as diretrizes sobre movimento das WCAG. As diretrizes determinam que você precisa criar uma opção para os usuários pausarem, interromperem ou ocultarem movimentos: elementos não essenciais de movimento, piscando ou rolagem que começam automaticamente, duram mais de cinco segundos e fazem parte de outros elementos da página.

Pausar, parar ou ocultar movimento

Adicione um mecanismo de pausa, parar ou ocultar à sua página para permitir que os usuários desativem animações de movimento potencialmente problemáticas. É possível fazer isso no nível da tela ou do elemento.

Por exemplo, suponha que seu produto digital inclui muitas animações. Considere adicionar um botão de JavaScript acessível para permitir que os usuários controlem a experiência. Quando o botão é alternado para "movimento desativado", todas as animações são congeladas nessa tela e todas as outras.

Usar consultas de mídia

Além de ser seletivo sobre as animações, oferecer aos usuários opções de pausar, parar, ocultar movimento e evitar loops infinitos de animações, você também pode considerar adicionar uma consulta de mídia focada em movimento. Isso dá aos usuários ainda mais escolhas sobre o que será exibido na tela.

@prefers-reduced-motion

Semelhante às consultas de mídia com foco em cores no módulo de cores, a consulta de mídia @prefers-adspolicyd-motion verifica as configurações do SO do usuário relacionadas à animação.

Um usuário pode definir preferências de exibição para reduzir o movimento. Essas configurações variam de acordo com o sistema operacional e podem ser enquadradas de forma positiva ou negativa. Com @prefers-reduced-motion, você pode criar um site que respeite essas preferências.

No MacOS e no Android, o usuário ativa essa configuração para reduzir o movimento. No MacOS, o usuário pode definir Reduzir movimento em "Configurações > Acessibilidade > Tela". A configuração do Android é Remover animações. No Windows, a configuração é enquadrada positivamente como Mostrar animações, que fica ativada por padrão. O usuário precisa desativar essa configuração para reduzir o movimento.

Como alternativa, conforme mostrado no próximo conjunto de exemplos, você pode codificar todas as suas animações para que parem de se mover em até cinco segundos, em vez de serem reproduzidas em um loop infinito.

Aprimoramento progressivo de movimento

Como designers e desenvolvedores, temos muitas escolhas a fazer, incluindo estados de movimento padrão e a quantidade de movimento a ser exibida. Vamos dar outra olhada no último exemplo sobre movimento.

Suponha que decidirmos que a animação é desnecessária para entender o conteúdo na tela. Nesse caso, podemos definir o estado padrão como a animação de movimento reduzido em vez da versão com movimento completo. A menos que os usuários peçam especificamente animações, elas são desativadas.

Não podemos prever que nível de movimento causará problemas para pessoas com convulsões, vestibulares e outros distúrbios visuais. Mesmo um pequeno movimento na tela pode causar tontura, visão turva ou pior. Portanto, no exemplo a seguir, o padrão é nenhuma animação.

Consultas de mídia em camadas

Você pode usar várias consultas de mídia para oferecer aos usuários ainda mais opções. Vamos usar @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion juntos.

Permita que os usuários escolham

Embora seja divertido incluir animação nos nossos produtos digitais para encantar os usuários, é fundamental lembrar que algumas pessoas serão afetadas por esses designs. A sensibilidade ao movimento pode afetar qualquer pessoa, desde um leve desconforto até causar uma doença ou convulsão debilitadora.

Você pode usar várias ferramentas diferentes para permitir que o usuário decida o que é melhor para ele, em vez de adivinhar quanto movimento é excessivo. Por exemplo, adicione um botão para ativar ou desativar a animação no seu site ou app da Web. Considere desativar esse botão por padrão.

Teste seu conhecimento

Teste seus conhecimentos sobre acessibilidade de movimento e animação.