Recursos · 66
Animação: verificar movimento reduzido, pausa e compreensão
Inventariar movimento, oferecer comportamento reduzido e testar se o progresso, o estado e a navegação permanecem compreensíveis sem animação.
Atualizado · 3 min
O que este guia ajuda a alcançar
- Gatilhos de inventário
- Definir comportamento reduzido
- Critérios WCAG separados
- Testar todas as implementações
Verificação rápida
- O movimento reduzido proíbe toda animação?
- O critério 2.3.3 é de nível AA?
- Uma regra CSS global é suficiente?
Método passo a passo
- 1
Gatilhos de inventário
Liste os movimentos automáticos, acionados por interação e vinculados à rolagem. Separe as informações de estado da decoração. Inspecione também animações JavaScript, vídeos e elementos incorporados.
Entregável: registro de efeitos e finalidade.
- 2
Definir comportamento reduzido
A preferência por movimento reduzido sinaliza o desejo de reduzir movimentos não essenciais. Ofereça uma alternativa estática ou mais silenciosa, mantendo as informações e os controles. Evite substituir grandes traduções por outro efeito que distraia.
Entregável: comportamento reduzido por componente.
- 3
Critérios WCAG separados
O critério de animação de interação 2.3.3 é de nível AAA. O critério de nível A 2.2.2 abrange, entre outros casos, certos movimentos automáticos com duração superior a cinco segundos, juntamente com outro conteúdo, a menos que sejam essenciais. Verifique as condições do critério aplicável.
Entregável: critérios e controles para cada efeito.
- 4
Testar todas as implementações
Emule a preferência antes do carregamento e durante uma sessão. Inspecione estilos, scripts e rolagem programática. Se o estado depender da conclusão da animação, assegure uma conclusão confiável também quando a animação for removida.
Entregável: testes de carga fria, mudança em tempo real e estado final.
- 5
Preservar informações e controles.
Exercitar a leitura, o teclado e o feedback de erros em ambos os modos. Para movimentos automáticos afetados, testar pausa, parada ou ocultação e estabilidade durante a leitura. Documentar exceções em vez de rotular cada animação como essencial.
Entregável: evidências e limitações.
Planilha reutilizável
Preencha com suas observações autorizadas. Estes campos são um modelo de trabalho, não resultados observados.
| Campo | Informações a serem registradas |
|---|---|
| Efeito | Gatilho, duração e informações |
| Alternativa | Versão reduzida e estado final |
| Critério | Nível, condições e controle |
| Teste | Preferência, teclado, resultado e limite |
Exemplo prático fictício
Situação ilustrativa
Exemplo fictício: um painel torna-se ativo somente após a conclusão de sua transição.
Decisão e evidências esperadas
A aceitação em modo reduzido revela a espera; o componente completa sua mudança de estado sem depender da duração da animação.
Distinguir os mecanismos
| Mecanismo | Finalidade | Verificação ou limitação |
|---|---|---|
| Preferência por movimento reduzido | Adaptar às opções do sistema | Verificar scripts também |
| Pausa no controle | Controlar o movimento automático afetado | Tornar operável por teclado |
| Estado estático | Reter informações sem movimento | Não remover o feedback de progresso ou erro |
Indicadores de gestão
| Indicador | O que mede | Primeira ação |
|---|---|---|
| Efeitos adaptados | Movimento com alternativas verificadas | Incluir incorporações e rolagem |
| Tarefas preservadas | Jornadas concluídas no modo reduzido | Inspecionar estados dependentes de animação |
| Controles funcionais | Pausa ou parada realmente efetiva | Verificar retomada e teclado |
Erros comuns
- Verificar scripts também
- Tornar operável por teclado
- Não remover o feedback de progresso ou erro
Perguntas frequentes
O movimento reduzido proíbe toda animação?
Não. Expressa uma preferência; escolha uma adaptação proporcional e retenha as informações necessárias.
O critério 2.3.3 é de nível AA?
Não, é AAA. Outros critérios podem ser aplicados ao movimento automático ou à intermitência.
Uma regra CSS global é suficiente?
Pode reduzir muitos efeitos, mas pode não controlar scripts, vídeos ou integrações. Teste os componentes reais.
Referências oficiais
As referências apoiam o método. Adapte as verificações ao seu contexto; elas não são uma certificação. Os títulos das referências originais e os documentos de origem podem estar em outro idioma.
Referências consultadas em .
