Animação e movimento

Você já sentiu o mundo girar de repente enquanto estava em um carro, barco ou avião? Ou já teve uma enxaqueca tão forte que as animações no smartphone ou tablet, criadas para "agradar" você, de repente fazem você se sentir mal? Ou talvez você sempre tenha sido sensível a 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 sofrido algum tipo de disfunção vestibular. Isso pode causar uma tontura temporária, vertigem induzida por enxaqueca ou uma deficiência vestibular mais permanente.

Além de causar vertigem, muitas pessoas acham o conteúdo em movimento, piscando ou rolando distrativo. Pessoas com ADHD e outros transtornos de déficit de atenção podem se distrair tanto com os elementos animados que se esquecem do motivo de terem acessado seu site ou app.

Neste módulo, vamos analisar algumas maneiras de ajudar melhor as pessoas com todos os tipos de transtornos desencadeados por movimentos.

Conteúdo piscante e em movimento

Ao criar animações e movimentos, pergunte-se se o movimento do elemento é excessivo. Por exemplo, cores piscando do escuro para o 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, e isso é mais comum em mulheres e pessoas mais jovens.

As diretrizes da WCAG sobre intermitência (em inglês) recomendam evitar o seguinte:

• Piscar mais de três vezes em um segundo
• Piscos abaixo do limiar geral e vermelho.

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

Para qualquer movimento extremo, é fundamental testar usando a Ferramenta de análise de epilepsia fotossensível (PEAT). O PEAT é uma ferramenta sem custo financeiro para identificar se o conteúdo, o vídeo ou as animações da tela podem causar convulsões. Nem todo conteúdo precisa ser avaliado pela PEAT, mas o conteúdo que contém transições rápidas ou piscantes entre cores de fundo claras e escuras deve ser avaliado, apenas por segurança.

Outra pergunta que você deve se fazer 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á criando ou projetando.

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

Pausar, interromper ou ocultar movimentos

Adicione um mecanismo de pausa, parada ou ocultação à sua página para permitir que os usuários desativem animações de movimento potencialmente problemáticas. Você pode fazer isso no nível da tela ou do elemento.

Por exemplo, suponha que seu produto digital inclua muitas animações. Considere adicionar uma alternância acessível de JavaScript 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 em todas as outras.

Usar consultas de mídia

Além de ser seletivo com as animações, oferecer opções aos usuários para pausar, parar, ocultar movimentos e evitar loops de animação infinitos, você também pode considerar adicionar uma consulta de mídia focada em movimento. Assim, os usuários têm ainda mais opções de escolha sobre o que é mostrado na tela.

@prefers-reduced-motion

Semelhante às consultas de mídia focadas em cores no módulo de cores, a consulta de mídia @prefers-reduced-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 são diferentes em cada sistema operacional e podem ser apresentadas de forma positiva ou negativa. Com @prefers-reduced-motion, é possível criar um site que respeite essas preferências.

No macOS e no Android, o usuário ativa a configuração para reduzir o movimento. No macOS, um 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 de forma positiva como Mostrar animações, que está ativada por padrão. Um usuário precisa desativar essa configuração para reduzir o movimento.

Para garantir a acessibilidade de pessoas com dificuldades de movimento, mesmo animações mais curtas que o limite de 5 segundos descrito nas diretrizes WCAG 2.0 AA devem ser abordadas com cautela. O método mais confiável é dar aos usuários que indicaram uma preferência por movimento reduzido o controle exclusivo sobre as animações, permitindo que eles iniciem e interrompam a animação usando controles dedicados, como um botão de reprodução e um botão de pausa, respectivamente.

Aprimoramento progressivo para movimento

Como designers e desenvolvedores, temos muitas escolhas a fazer, incluindo estados de movimento padrão e a quantidade de movimento a ser exibida. Confira de novo o último exemplo sobre movimento.

Suponha que decidimos que a animação não é necessá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 de movimento completo. A menos que os usuários peçam especificamente animações, elas ficam desativadas.

Não é possível prever qual nível de movimento vai causar problemas para pessoas com convulsões, distúrbios vestibulares e outros distúrbios visuais. Mesmo um pequeno movimento na tela pode causar tontura, visão embaçada ou algo 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 ainda mais opções aos usuários. É possível usar @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion ao mesmo tempo.

Permitir que os usuários escolham

Embora seja divertido criar animações para nossos produtos digitais e 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é uma doença debilitante ou convulsão.

Você pode usar várias ferramentas diferentes para permitir que o usuário decida o que é melhor para ele, em vez de adivinhar o quanto de movimento é demais. Por exemplo, adicione uma alternância para ativar ou desativar a animação no seu site ou web app. Considere definir essa alternância como desativada por padrão.