Animação e movimento

Você já sentiu o mundo girar enquanto estava em um carro, barco ou avião? Ou teve uma enxaqueca tão forte que as animações no smartphone ou tablet, criadas para "agradar", de repente fizeram você se sentir mal? Ou talvez você sempre tenha sido sensível a todos os tipos de movimento? Esses são exemplos de diferentes tipos de distúrbios vestibulares.

Aos 40 anos, mais de 35% dos adultos terão sofrido alguma forma de disfunção vestibular. Isso pode levar a uma tontura temporária, vertigem induzida por enxaqueca ou uma deficiência vestibular mais permanente.

Além de desencadear vertigem, muitas pessoas acham o conteúdo em movimento, piscando ou rolando, uma distração. Pessoas com ADHD e outros transtornos de déficit de atenção podem ficar tão distraídas pelos elementos animados que se esquecem do motivo de terem acessado seu site ou app em primeiro lugar.

Neste módulo, vamos conferir algumas maneiras de ajudar melhor as pessoas com todos os tipos de distúrbios desencadeados por movimento.

Conteúdo piscante e em movimento

Ao criar animação e movimento, pergunte a si mesmo 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 sofram de fotossensibilidade, e isso é mais comum em mulheres e jovens.

As diretrizes da WCAG sobre conteúdo piscante recomendam evitar o seguinte:

• Flashes por mais de três vezes em um segundo
• Flashes abaixo do limite geral de flash e flash 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 testá-lo usando a ferramenta de análise de epilepsia fotossensível (PEAT, na sigla em inglês). A 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 o conteúdo precisa ser avaliado pela PEAT, mas o conteúdo que contém flashes ou transições rápidas entre cores de fundo claras e escuras deve ser avaliado, apenas para garantir a segurança.

Outra pergunta que você deve 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, mesmo os 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 você não pode remover o movimento por outro motivo. Nesse caso, siga as diretrizes da WCAG sobre movimento. As diretrizes afirmam que você precisa criar uma opção para que os usuários pausem, parem ou ocultem o movimento de elementos não essenciais que se movem, piscam ou rolam, que começam automaticamente, duram mais de cinco segundos e fazem parte de outros elementos da página.

Pausar, parar ou ocultar o movimento

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 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 em todas as outras.

Usar consultas de mídia

Além de ser seletivo sobre suas animações, oferecer aos usuários opções para pausar, parar, ocultar o movimento e evitar loops de animação infinitos, você também pode considerar adicionar uma consulta de mídia focada no movimento. Isso oferece aos usuários ainda mais opções quando se trata do que é exibido na tela.

@prefers-reduced-motion

Semelhante às consultas de mídia focadas em cores no módulo de cores, a @prefers-reduced-motion consulta de mídia 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 sistemas operacionais e podem ser enquadradas de forma positiva ou negativa. Com @prefers-reduced-motion, você pode projetar 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 Ajustes > Acessibilidade > Tela. A configuração do Android é Remover animações. No Windows, a configuração é enquadrada positivamente 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 que têm dificuldades com movimento, mesmo animações mais curtas que o limite de 5 segundos descrito nas diretrizes AA da WCAG 2.0 precisam ser abordadas com cautela. O método mais confiável é capacitar os usuários que indicaram uma preferência por movimento reduzido, oferecendo 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 opções a fazer, incluindo estados de movimento padrão e quanto movimento exibir. Confira novamente o último exemplo de movimento.

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

Não podemos prever qual nível de movimento causará problemas para pessoas com convulsões, vestibulares e outros distúrbios visuais. Mesmo uma pequena quantidade de movimento na tela pode desencadear tontura, visão turva ou pior. Portanto, no exemplo a seguir, usamos a animação padrã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. Vamos usar @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion juntos.

Permitir que os usuários escolham

Embora possa ser divertido criar animações em nossos produtos digitais para agradar 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 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 quanto movimento é demais. Por exemplo, adicione uma alternância para ativar ou desativar a animação no seu site ou app da Web. Considere definir essa alternância como desativada por padrão.