Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung
Acessibilidade
Como as animações desligam quando operadas?
Efeitos do Parallax ao rolar, elementos que voam para cima ao clicar, páginas que giram ao alternar: Para pessoas com distúrbios vestibulares, tais movimentos desencadeiam tontura, náuseas e cefaleia. O critério 2.3.3 do Nível AAA exige que as animações desencadeadas por uma operação sejam desligadas, a menos que a animação seja essencial para a função ou informação.
O que o critério requer
Qualquer movimento que ocorra como resultado de uma operação (rolagem, clique, digitação, swiping) pode ser desligado sem que a função seja perdida. Um pergaminho suave para a âncora torna-se um salto, um menu principal aparece imediatamente, um fundo paralaxe fica parado. Excluem-se animações essenciais: um indicador de progresso que mostre uma sequência ou uma simulação cujo conteúdo seja movimento.
A implementação através da configuração do sistema
Os sistemas operacionais têm uma configuração de "reduzir movimento", que o navegador passa como uma consulta de mídia prefere-reduzido-moção. Uma folha de estilo que define todas as transições e animações para zero sob esta consulta atende ao critério para tudo o que é animado via CSS. Para animações JavaScript, a mesma consulta é avaliada antes de iniciar. Um interruptor separado na página é um suplemento para pessoas que não sabem a configuração do sistema.
É assim que lidamos com isso
A medição pode verificar se a folha de estilo contém uma regra para o movimento de preferência reduzida e se as animações terminam sob ele; Se animações JavaScript ouvi-lo, um revisor verá ao operar com a configuração ligada. O critério pertence à categoria AAA no conhecimento.
Exemplos
Paralaxe sem desligamento
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}A configuração do sistema “Reduzir movimento” desliga todos os movimentos que não são necessários para a função.
- Adicione um bloco para preferes-reduced-motion à folha de estilo que define transições e animações para 0,01 ms de duração e comportamento de rolagem para auto.
- Avaliar a consulta no JavaScript (matchMedia) e iniciar efeitos de paralaxe e voo somente se o movimento for permitido.
- Teste com a configuração do sistema ligada: Nada é permitido deslizar, voar ou rodar mais.
- Ofereça um botão visível "Desativar" que salva a escolha no navegador.
