Animação e movimento

Você já esteve em um carro, barco ou avião e, de repente, sentiu o mundo girar? Ou teve uma enxaqueca tão forte que as animações no seu smartphone ou tablet, criadas para "alegrar" você, de repente o deixaram doente? 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 já terão experimentado algum tipo de disfunção vestibular. Isso pode levar a um período de tontura temporário, vertigem induzida por enxaqueca ou uma deficiência vestibular mais permanente.

Além de causar vertigem, muitas pessoas acham que o conteúdo em movimento, piscando ou rolando uma tela é uma distração. Pessoas com TDAH e outros transtornos de déficit de atenção podem ficar tão distraídas pelos elementos animados que se esquecem de por que acessaram 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 movimentos.

Como exibir e mover conteúdo

Ao criar animação e movimento, verifique se o movimento do elemento é excessivo. Por exemplo, cores que piscam 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 pessoas mais jovens.

As diretrizes de atualização das WCAG recomendam contra o seguinte:

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

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

Para qualquer movimento extremo, é fundamental testar usando a Ferramenta de análise fotosensível de epilepsia (PEAT, na sigla em inglês). A PEAT é uma ferramenta gratuita 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 pelo PEAT, mas o conteúdo que contém transições rápidas ou intermitentes entre cores de plano de fundo claras e escuras precisa ser avaliado, só por 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, até mesmo micromovimentos, do elemento que você está criando ou projetando.

Suponha que você acredite que o movimento do elemento não é essencial, mas poderia melhorar a experiência geral do usuário, ou não é possível remover o movimento por outro motivo. Nesse caso, siga as diretrizes de movimento da WCAG. As diretrizes afirmam que você precisa criar uma opção para os usuários pausarem, pararem ou ocultarem o movimento para elementos não essenciais em movimento, piscando ou de rolagem 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 para pausar, interromper ou ocultar à página para permitir que os usuários desativem a animação em movimento potencialmente problemática. 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 um interruptor 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 em relação às animações, oferecer aos usuários opções para pausar, parar, ocultar movimento e evitar loops infinitos de animação, você também pode adicionar uma consulta de mídia focada em movimento. Isso dá aos usuários ainda mais opções quando se trata do que é exibido na tela.

`@prefers-reduced-motion`

Assim como as consultas de mídia com foco 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.

Interface das configurações de tela do MacOS, em que a opção "Reduzir movimento" está ativada.

Um usuário pode definir preferências de exibição para reduzir o movimento. Essas configurações são diferentes entre os sistemas operacionais e podem ser definidas de forma positiva ou negativa. Com @prefers-reduced-motion, você pode projetar um site que respeite essas preferências.

Compatibilidade com navegadores

Origem

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

Como mostrado no próximo conjunto de exemplos, você também pode programar todas as animações para que parem de se mover em cinco segundos ou menos, em vez de serem reproduzidas em um loop infinito.

Aprimoramento progressivo para o 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 novamente o último exemplo em movimento.

Suponha que decidimos 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 reduzida em vez da versão com movimento total. A menos que os usuários solicitem explicitamente animações, elas serão 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 uma pequena quantidade de movimento na tela pode causar tontura, visão embaçada ou pior. No exemplo a seguir, não usamos 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. Vamos usar @prefers-color-scheme, @prefers-contrast e @prefers-reduced-motion juntos.

Permita que os usuários escolham

Embora possa ser divertido incorporar animação aos 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 debilitante ou convulsões.

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

Teste seu conhecimento

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

O que podemos criar que reflita as configurações do sistema operacional para movimento?

@prefers-reduced-motion

Sim. Essa consulta de mídia permite que você decida quanto movimento usar com base nas configurações de exibição de um usuário. Essas configurações diferem entre sistemas operacionais, portanto, considere implementar a escolha de movimento, além dessa consulta de mídia.

Alternâncias de JavaScript

Não é bem isso. Os alternadores permitem que o usuário faça uma escolha depois de chegar ao seu site, mas não podem ler as configurações do usuário.