WCAG 2.3.3: Animação a partir de interações

O Que Esta Regra Significa

WCAG 2.3.3 — Animação a partir de Interações é um critério de Nível AAA sob o princípio Operável. Exige que qualquer animação de movimento acionada por interação possa ser desativada pelo usuário, a menos que essa animação seja essencial para a funcionalidade ou para a informação que está sendo transmitida. O critério se aplica a animações iniciadas por ações do usuário, como clicar, rolar, passar o mouse, focar ou qualquer outra forma de interação — não a animações que são reproduzidas automaticamente no carregamento da página (que podem ser regidas por outros critérios, como 2.2.2 Pausar, Parar, Ocultar).

O conceito-chave aqui é animação de movimento. Isso inclui efeitos de rolagem parallax, animações de transição de página, deslizamento ou zoom de elementos, indicadores giratórios e qualquer outro movimento que ocorra como consequência direta da ação de um usuário. Não abrange simples transições de opacidade ou mudanças de cor, porque estas não envolvem movimento espacial que possa desencadear respostas vestibulares. A distinção é entre movimento através do espaço (que pode causar danos) e mudanças de aparência sem deslocamento espacial (que geralmente não podem).

Para aprovação, é necessário que os usuários tenham um mecanismo confiável para desativar tais animações sem perder acesso ao mesmo conteúdo ou funcionalidade. A técnica mais amplamente aceita é respeitar a media query de nível de sistema operacional prefers-reduced-motion, que reflete a preferência do sistema do usuário para reduzir movimento. Alternativamente, um controle de alternância em nível de site, colocado de forma proeminente na interface — como em um painel de configurações ou widget de acessibilidade — pode satisfazer o critério, desde que persista entre sessões e seja fácil de encontrar.

A exceção de essencial é restrita: uma animação é essencial apenas se removê-la alteraria fundamentalmente a informação ou a funcionalidade, e não existir nenhuma alternativa equivalente não animada. Um indicador de carregamento giratório que seja o único sinal visual de que o conteúdo está sendo buscado pode se qualificar; uma imagem de fundo parallax decorativa que se move conforme o usuário rola não se qualifica, mesmo que seja esteticamente central para o design.

O critério não exige que as animações sejam removidas completamente — apenas que exista um mecanismo para desativá-las. Quando o mecanismo é acionado, o conteúdo ainda deve ser totalmente acessível, o que significa que uma alternativa não animada deve transmitir a mesma informação ou atingir a mesma função.

Por Que Isso Importa

Transtornos vestibulares — condições que afetam o ouvido interno e o cérebro, responsáveis pelo controle do equilíbrio e do movimento ocular — afetam uma parcela substancial da população global. De acordo com a Vestibular Disorders Association, aproximadamente 35% dos adultos com 40 anos ou mais nos Estados Unidos já experimentaram alguma forma de disfunção vestibular. Globalmente, condições como vertigem posicional paroxística benigna (BPPV), doença de Ménière e enxaquecas vestibulares afetam dezenas de milhões de pessoas. Para essas pessoas, movimento na tela pode desencadear sintomas físicos imediatos, incluindo tontura, vertigem, náusea, dores de cabeça e, em casos graves, incapacidade temporária.

Considere uma pessoa com enxaqueca vestibular que visita um site de reserva de viagens. O site usa um efeito de rolagem parallax em página inteira, em que a imagem de destaque se move em uma velocidade diferente do conteúdo da página conforme o usuário rola. Em poucos segundos após começar a rolar, a pessoa sente tontura intensa e náusea. Ela não consegue concluir a reserva e precisa abandonar o site completamente — não por causa de uma barreira cognitiva ou de uma deficiência motora, mas por causa de uma reação física ao movimento na tela. Este é o dano no mundo real que a WCAG 2.3.3 foi projetada para prevenir.

Além dos transtornos vestibulares, animações de movimento podem afetar negativamente pessoas com transtornos de déficit de atenção, que consideram o movimento persistente ou acionado algo distrativo e difícil de ignorar, bem como pessoas com transtornos de ansiedade, para as quais movimento inesperado pode causar angústia. Pessoas em recuperação de concussões ou lesões cerebrais traumáticas também são altamente sensíveis ao movimento visual. Mesmo pessoas sem qualquer condição diagnosticada podem achar animação intensa cansativa durante sessões prolongadas.

Do ponto de vista de usabilidade e negócios, respeitar preferências de movimento reduzido se correlaciona com melhores taxas de conclusão de tarefas e maior duração de sessão entre usuários sensíveis. Respeitar preferências em nível de sistema também sinaliza que um produto é bem projetado e atento às necessidades dos usuários, o que gera confiança. Para o comércio eletrônico, em que o abandono de carrinho devido a uma experiência ruim impacta diretamente a receita, remover barreiras de animação desnecessárias é um benefício comercial concreto.

Regras Relacionadas do Axe-core

WCAG 2.3.3 exige testes manuais. Nenhuma regra automatizada do axe-core mapeia diretamente para esse critério, e isso é intencional, não um descuido. As razões pelas quais ferramentas automatizadas não conseguem detectar violações de forma confiável são substanciais:

• Por que a automação não consegue detectar isso: Detectar animação de movimento exige entender a renderização visual de uma página ao longo do tempo em resposta à interação do usuário. Varredores automatizados de acessibilidade analisam instantâneos estáticos ou levemente renderizados do DOM; eles não simulam interações do usuário, como rolagem ou cliques, e depois observam se transições CSS ou animações acionadas por JavaScript produzem movimento espacial. Mesmo que um varredor pudesse detectar a presença de propriedades CSS de animação ou transição, ele não conseguiria determinar se essa animação envolve deslocamento espacial (que pode desencadear respostas vestibulares) ou uma simples transição de opacidade (que não desencadeia). Além disso, o varredor não consegue determinar se uma media query prefers-reduced-motion está corretamente configurada para suprimir a animação, se existe um controle de alternância em nível de site ou se a animação é realmente essencial. Todos esses julgamentos exigem um testador humano que possa observar a experiência renderizada, interagir com a página e avaliar o resultado.
• O que a inspeção manual deve focar: Testadores devem identificar todas as propriedades CSS que criam movimento espacial — incluindo transform: translateX/Y/Z, transform: scale, transform: rotate, transições de top/left/margin, keyframes de animation que movem elementos pelo espaço — e verificar se cada uma está condicionada a uma media query prefers-reduced-motion: reduce ou a um controle de alternância controlado pelo usuário. Animações acionadas por JavaScript usando bibliotecas como GSAP, Framer Motion ou loops personalizados de requestAnimationFrame devem ser revisadas com o mesmo rigor.

Como Testar

1. Ative Movimento Reduzido no nível do SO: No macOS, vá para Ajustes do Sistema > Acessibilidade > Tela e ative "Reduzir movimento". No Windows 11, vá para Configurações > Acessibilidade > Efeitos visuais e desative "Efeitos de animação". No iOS, vá para Ajustes > Acessibilidade > Movimento e ative "Reduzir movimento". No Android, vá para Configurações > Acessibilidade > Remover animações. Isso define a media query prefers-reduced-motion: reduce como ativa.
2. Execute uma varredura automatizada como linha de base: Abra axe DevTools ou Lighthouse nas DevTools do Chrome na página alvo. Embora nenhuma das ferramentas sinalize diretamente uma violação da WCAG 2.3.3, a varredura pode revelar problemas relacionados e confirma que o ambiente de teste está funcional. Anote quaisquer achados relacionados a animação para contexto.
3. Interaja com a página enquanto Movimento Reduzido do SO estiver ativo: Role a página lentamente, clique em elementos interativos como botões, alternâncias de navegação, dropdowns, carrosséis e modais. Passe o mouse sobre elementos. Navegue pela página com o teclado usando Tab. Observe se alguma animação de movimento espacial ainda é reproduzida. Se as animações forem suprimidas, isso é uma aprovação para o caminho de preferência do SO.
4. Desative Movimento Reduzido do SO e teste novamente: Com Movimento Reduzido do SO desativado, repita todas as interações. Identifique cada animação de movimento que é acionada por interação do usuário. Documente cada uma com uma descrição da ação que a aciona e da animação observada.
5. Verifique se há um controle de alternância de animação em nível de site: Se Movimento Reduzido do SO não for respeitado, procure um controle em nível de site — comumente encontrado em um widget de acessibilidade, menu de configurações ou rodapé. Ative-o e repita todos os testes de interação para confirmar que o movimento é suprimido.
6. Inspecione CSS e JavaScript em busca de implementação de prefers-reduced-motion: Abra as DevTools, vá para o painel Sources ou Elements e pesquise por prefers-reduced-motion nos arquivos de folha de estilo. Verifique se todas as animações de movimento identificadas estão condicionadas a essa media query. Nas DevTools do Chrome, você pode emular a media query: abra a aba Rendering (More Tools > Rendering) e defina "Emulate CSS media feature prefers-reduced-motion" como "reduce". Confirme que as animações são suprimidas sem reiniciar o navegador.
7. Avalie as exceções essenciais: Para cada animação restante quando o movimento reduzido estiver ativo, avalie se ela é genuinamente essencial — remover a animação elimina informação ou funcionalidade que não tem equivalente não animado? Documente seu raciocínio para cada determinação.
8. Verificação com leitor de tela (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Usuários de leitores de tela não são imunes a efeitos vestibulares se também tiverem visão parcial. Navegue pela página usando apenas o teclado enquanto um leitor de tela estiver ativo e Movimento Reduzido do SO estiver habilitado. Confirme que nenhuma animação é acionada por eventos de foco ou interações via teclado que não contem com a acomodação de movimento reduzido.

Como Corrigir

Efeito de rolagem parallax — Incorreto

<!-- Background moves at a different rate than content on scroll -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Creates parallax on scroll */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Efeito de rolagem parallax — Correto

<!-- Parallax is disabled when the user prefers reduced motion -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallax by default */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Static background; no spatial movement */
    }
  }
</style>
<div class='hero'></div>

Transição CSS em elemento interativo — Incorreto

<!-- Button slides and scales on click with no reduced-motion accommodation -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

Transição CSS em elemento interativo — Correto

<!-- Spatial transform is suppressed; a simple opacity shift conveys state without motion -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Only non-spatial change retained */
    }
    .btn:active {
      transform: none; /* No movement */
      opacity: 0.75;   /* State still communicated visually */
    }
  }
</style>
<button class='btn'>Submit</button>

Biblioteca de animação JavaScript (GSAP) — Incorreto

<!-- GSAP tween fires on button click regardless of user motion preference -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

Biblioteca de animação JavaScript (GSAP) — Correto

<!-- Check matchMedia before triggering spatial animation; fall back to instant display -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Skip spatial movement; just make the modal visible immediately */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Controle de alternância de animação em nível de site (widget de acessibilidade) — Padrão correto

<!-- Persist user preference in localStorage and apply a class to <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Default: animations active */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* When user opts out via widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Erros Comuns

• Aplicar prefers-reduced-motion apenas a animações CSS, mas não a transições CSS: Tanto a propriedade abreviada animation quanto a propriedade transition podem produzir movimento espacial. As equipes frequentemente escrevem uma media query para animações com keyframes e esquecem que transition: transform 0.3s em hover ou foco também aciona movimento que deve ser condicionado.
• Usar prefers-reduced-motion: no-preference como condição da media query em vez de reduce: O padrão correto envolve estilos de experiência reduzida em @media (prefers-reduced-motion: reduce), não o inverso. Envolver estilos de animação em @media (prefers-reduced-motion: no-preference) pode funcionar, mas é mais propenso a erros e frequentemente é aplicado de forma incorreta, deixando animações ativas para usuários que não definiram explicitamente uma preferência.
• Armazenar em cache o resultado de matchMedia uma vez e nunca verificar novamente: Um usuário pode alterar sua preferência no SO enquanto a página está aberta. Inscreva-se em matchMedia(...).addEventListener('change', handler) para que animações acionadas por JavaScript respondam a mudanças de preferência em tempo real sem exigir recarregamento da página.
• Tratar transições apenas de opacidade como animações de movimento que devem ser suprimidas: O critério tem como alvo especificamente o movimento espacial. Remover transições de opacidade quando o movimento reduzido está ativo é excessivamente agressivo e prejudica a usabilidade. Fades que não movem elementos pelo espaço geralmente são aceitáveis de manter.
• Colocar o controle de alternância de animação profundamente em um menu de configurações inacessível: Se um controle em nível de site for usado em vez de (ou além de) a media query do SO, ele deve ser fácil de encontrar — idealmente no cabeçalho ou rodapé persistente do site, ou em um widget de sobreposição acessível — e não enterrado três níveis abaixo em uma página de configurações de conta que exige login.
• Presumir que todas as bibliotecas de animação respeitam automaticamente prefers-reduced-motion: A maioria das bibliotecas de animação JavaScript, incluindo GSAP, Anime.js e implementações personalizadas de requestAnimationFrame, não respeita automaticamente a media query. Cada animação programática deve ser individualmente protegida com uma verificação de matchMedia na camada JavaScript.
• Declarar uma animação essencial sem justificativa adequada: Equipes às vezes classificam animações decorativas complexas como essenciais para evitar o trabalho de correção. A exceção de essencial é restrita; uma animação é essencial apenas se a informação que ela transmite não puder ser expressa por meios estáticos ou não animados. Spinners de carregamento, parallax decorativo e transições de entrada de página quase nunca se qualificam como essenciais.
• Deixar de testar interações além de clique — especialmente rolagem e hover: Efeitos de rolagem parallax e transforms acionados por hover estão entre os piores ofensores vestibulares, mas os testes frequentemente se limitam a interações de clique. Testes abrangentes devem cobrir todas as modalidades de interação, incluindo rolagem, hover, foco, arrastar e navegação por teclado.
• Não persistir a preferência do controle de alternância em nível de site entre sessões: Se uma pessoa define um controle de site para reduzir movimento e depois navega para outra página ou retorna ao site no dia seguinte e a configuração é redefinida, a acomodação falhou na prática. Preferências devem ser armazenadas em localStorage ou em um perfil de usuário e reaplicadas em cada carregamento de página.
• Esquecer embeds e widgets de terceiros: Feeds sociais incorporados, widgets de chat, embeds de mapas e scripts de publicidade podem introduzir suas próprias animações de movimento totalmente fora do controle do CSS do site hospedeiro. Conteúdo de terceiros deve ser auditado e os fornecedores devem ser envolvidos para fornecer suporte a movimento reduzido, ou os embeds devem ser encapsulados em contêineres que suprimam movimento por meio de estratégias de contenção em CSS, quando viável.

Relação com os Regulamentos de Acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial (Resmî Gazete) nº 32933 em 21 de junho de 2025, estabelece obrigações vinculativas de acessibilidade digital para um conjunto definido de tipos de entidades que operam na Turquia. As entidades abrangidas incluem instituições e agências públicas, plataformas de comércio eletrônico, bancos e prestadores de serviços financeiros, hospitais e instalações privadas de saúde, operadoras de telecomunicações com 200.000 ou mais assinantes, agências de viagens licenciadas, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE).

A Circular determina conformidade com a WCAG 2.1 em Nível AA como padrão básico para serviços digitais produzidos ou substancialmente atualizados após a data de vigência. WCAG 2.3.3 — Animação a partir de Interações é um critério de Nível AAA e, portanto, não é um requisito obrigatório sob a Circular Presidencial 2025/10. Entidades abrangidas não são legalmente obrigadas a implementar esse critério para alcançar status de conformidade sob a legislação turca.

No entanto, alcançar conformidade de Nível AAA em critérios como 2.3.3 traz valor prático e reputacional significativo para organizações turcas. Condições de sensibilidade vestibular e ao movimento são deficiências invisíveis que frequentemente são negligenciadas em auditorias de acessibilidade focadas de forma estreita na compatibilidade com leitores de tela. Para setores como saúde (hospitais e plataformas privadas de saúde), em que os usuários podem incluir pacientes com condições neurológicas que aumentam a sensibilidade ao movimento, e para comércio eletrônico e agências de viagens, em que padrões de UI com rolagem intensa e animação são comuns, implementar 2.3.3 demonstra uma abordagem madura e centrada no usuário para acessibilidade.

Organizações que buscam conformidade AAA voluntária — como aquelas que procuram vantagens em licitações públicas, entrada em mercados internacionais ou certificação setorial — devem tratar 2.3.3 como um critério prioritário, dado o custo de correção relativamente baixo (uma estratégia bem estruturada de media query prefers-reduced-motion pode ser aplicada sistematicamente em um design system) e o dano físico direto que sua ausência pode causar. Incluir um controle de animação dentro de um widget de sobreposição de acessibilidade, como o Accsible, permite que organizações turcas ofereçam essa acomodação sem exigir que os usuários localizem as configurações de seu sistema operacional — tornando o caminho para movimento reduzido descobrível e utilizável para o público mais amplo possível.