Controle de animação
O que a norma pede
Animações que começam sozinhas, duram mais de 5 segundos e aparecem junto de outro conteúdo podem ser pausadas, paradas ou ocultadas, a menos que sejam essenciais para a atividade.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: não há animação automática de mais de 5 segundos ao lado de outro conteúdo.
- Ou: há um mecanismo para pausar, parar ou ocultar a animação.
- Ou: a animação é essencial para a atividade.
- 2.2.2 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Evite carrosséis que avançam sozinhos. Se houver, inclua um botão de pausar visível e faça a animação parar quando o foco ou o cursor estiverem nela.
Carrossel da página inicial
Cinco destaques que trocam a cada 4 segundos.
Errado: Sem controle
No protótipo
Troca automática sem botão de pausa.
Quem lê devagar nunca termina um destaque.
Certo: Com pausa
No protótipo
Botão “Pausar” e troca só ao acionar as setas.
Cada pessoa lê no seu tempo.
Implemente um botão de pausar e retomar acessível pelo teclado e pare a rotação quando o componente receber foco ou cursor. Não inicie animações automáticas quando prefers-reduced-motion estiver ativo.
Rotação do carrossel
Implementação.
Errado: Rotação sem fim
setInterval(proximoSlide, 4000);Não há como parar.
Certo: Controlável
const reduzir = matchMedia("(prefers-reduced-motion: reduce)").matches; if (!reduzir) iniciarRotacao(); botaoPausar.onclick = alternarRotacao;Respeita a preferência e pode ser pausado.
Questione a necessidade de carrosséis automáticos, que costumam ter baixo engajamento, e exija controle de pausa em qualquer animação longa. Destaques fixos muitas vezes funcionam melhor.
Destaques da página inicial
A equipe discute o formato dos destaques.
Errado: Carrossel automático
Decisão
Cinco destaques girando sem controle.
Pouca leitura e exclusão.
Certo: Destaques fixos
Decisão
Três destaques fixos lado a lado.
Mais leitura e sem barreira.
Observe a página por 10 segundos sem interagir e procure conteúdos que se movem sozinhos. Confira se dá para pausá-los pelo teclado e o que acontece com a opção de reduzir movimento do sistema ativa.
Carrossel
Teste de controle.
Errado: Sem controle
Carrossel avança sozinho
Nenhum botão de pausa
Não atende.
Certo: Com controle
“Pausar destaques, botão”
Enter → rotação para
Atende.
Não coloque avisos importantes só em carrosséis, porque o slide some antes que muitas pessoas terminem de ler. Publique o essencial num lugar fixo.
Aviso de prazo
Aviso sobre o fim das inscrições.
Errado: No 4º slide
Publicação
Aviso só no quarto slide do carrossel.
Quase ninguém vê.
Certo: Aviso fixo
Publicação
Faixa de aviso fixa no topo da página.
Todos veem.