Animação e movimento

Você já andou de 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 celular ou tablet criado para "encantar" você, de repente, deixar você 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 terão alguma forma de disfunção vestibular. Isso pode levar a uma tontura temporária, vertigem induzida por enxaqueca ou outro problema deficiência vestibular permanente.

Além de causar vertigem, muitas pessoas acham que se mexem, piscam ou rolam a tela que distraiam o usuário. Pessoas com TDAH e outros transtornos de déficit de atenção podem ficar tão distraídos com seus elementos que esquecem porque foram ao seu site ou app em primeiro lugar.

Neste módulo, veremos algumas formas de ajudar as pessoas a apoiar melhor com todos os tipos de distúrbios desencadeados por movimentos.

Como atualizar e mover conteúdo

Ao criar animação e movimento, verifique 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 pessoas mais jovens.

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

• Pisca mais de três vezes a cada segundo
• Pisca abaixo do limite geral de flash e o 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, é essencial que você o teste usando o Ferramenta de análise fotosensível de epilepsia (PEAT, na sigla em inglês). PEAT é uma ferramenta sem custo financeiro para identificar se o conteúdo, vídeo ou animações da tela podem causar convulsões. Nem todo conteúdo precisa ser avaliado pela PEAT, mas conteúdo com transições intermitentes ou rápidas entre claro e escuro as cores de fundo devem ser avaliadas apenas por segurança.

Outra pergunta que você precisa 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á 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 você não pode remover o movimento de outro e por um bom motivo. Nesse caso, você deve seguir as diretrizes da WCAG diretrizes sobre movimento. As diretrizes determinam que você precisa criar uma opção para os usuários pausarem, interromperem ou ocultar o movimento de elementos não essenciais em movimento, piscando ou de rolagem que iniciar automaticamente, durar mais de cinco segundos e fazer parte de outro os elementos.

Pausar, parar ou ocultar movimento

Adicionar uma opção pausar, parar ou ocultar mecanismo de pesquisa à sua página para permitir que os usuários desativem recursos animação de movimento. Você pode fazer isso no nível da tela ou do elemento.

Por exemplo, suponha que seu produto digital inclua muitas animações. Adicione uma alternância de JavaScript acessível. para permitir que os usuários controlem a própria experiência. Quando o botão é alternado para "movimento desativado", todas as animações são congeladas nessa tela e nas demais;

Usar consultas de mídia

Além de ser seletivo sobre suas animações, oferecer opções aos usuários para pausar, parar, ocultar o movimento e evitar loops infinitos de animação, é possível considere adicionar uma consulta de mídia focada no movimento. Isso dá aos usuários até 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.

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

Compatibilidade com navegadores

• 74,00
• 79,00
• 63,00
• 10,1

Origem

No MacOS e no Android, o usuário ativa a configuração para reduzir o movimento. No MacOS, um usuário pode definir a opção 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. Um usuário precisa ativar essa configuração desativada para reduzir o movimento.

Observação : como cada interface usa um idioma diferente, ainda é possível permitir que os usuários escolham por conta própria, em vez de adivinhar quanta animação é demais. Isso pode variar de acordo com a situação.

Como alternativa, como mostrado no próximo conjunto de exemplos, você pode codificar todas as suas 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 quantos movimentos mostrar. Vamos analisar novamente o último exemplo sobre movimento.

Suponha que decidimos que a animação é desnecessária para entender o conteúdo na tela. Nesse caso, podemos optar por definir o estado padrão para 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, as animações são desativadas.

Observação : as preferências de movimento disponíveis dependem do sistema operacional. Algumas permitem ativar as animações, enquanto outras exigem que você as desative.

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

Permita que os usuários escolham

Embora possa ser divertido incorporar animação aos nossos produtos digitais para encantar usuários, é fundamental lembrarmos que algumas pessoas serão afetadas por esses designs. A sensibilidade ao movimento pode afetar qualquer pessoa, desde um pequeno desconforto até causar uma doença ou convulsão debilitante.

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

Teste seu conhecimento

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

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

@prefers-reduced-motion

Sim. Essa consulta de mídia permite que você decida a quantidade de movimento a ser usada 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 controles de ativação 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.