Conteúdos em Movimento, Animações e Elementos Piscantes

O que é?

Diretrizes para controlar o movimento e evitar elementos piscantes adversos que causem desconforto.

Refere-se a qualquer conteúdo que se mova, pisque, role ou altere automaticamente (como banners, GIFs, vídeos em reprodução automática, carrosséis ou textos em marquee - movimento contínuo). O usuário deve conseguir pausar, parar ou ocultar o movimento, a fim de evitar a exposição a estímulos visuais intensos.

Por que é importante?

Movimento excessivo pode distrair ou causar crises.

Conteúdos piscantes acima de 3 flashes por segundo podem provocar crises epilépticas em pessoas com fotossensibilidade.
Movimento automático constante dificulta a leitura e a concentração, especialmente para pessoas com deficiência visual, cognitiva ou Transtorno do Déficit de Atenção com Hiperatividade (TDAH).
Permitir ao usuário controlar o movimento e prever o comportamento da interface melhora a segurança e a usabilidade para todos.

Quando utilizar?

Sempre que houver movimento, rolagem ou piscar automático.

Aplicável em:

Portais;
Páginas HTML;
Atividades com uso de ferramentas de autoria (exemplo: Rise e H5P);
Apresentações com transições;
Vídeos embutidos;
Banners animados.

Como aplicar?

Ofereça controle de movimento e evite piscadas.

Controle: adicione botões visíveis para pausar, parar ou ocultar carrosséis e banners.
Evite flashes: não exceder 3 piscadas por segundo.
Evite autoplay: desative reprodução automática de vídeos ou áudio.
Aplique transições suaves: use movimento lento e previsível.
Promova acessibilidade: todos os controles devem ser acessíveis via teclado.

Método de verificação

Testar controle, segurança e foco.

Teste manual: verifique se há controles de pausa e se autoplay está desativado.
Foco: confirme acesso aos botões via teclado.
Segurança: use ferramenta PEAT (Photosensitive Epilepsy Analysis Tool - ferramenta de análise de risco de epilepsia fotossensível) para medir flashes.
Confirmação: certifique-se que o usuário não perde o foco nem o conteúdo ao interagir.

Exemplos

Carrossel com botões de pausa são acessíveis. Banners piscantes automáticos não são acessíveis.

Corretos:

Carrossel com botões “Anterior”, “Próximo” e “Pausar”;
GIF animado que roda apenas uma vez.

Incorretos:

Banner piscante em repetição eterna (loop) sem controle;
Texto em movimento contínuo (<marquee>);
Vídeo com reprodução automática e som ativado.

O que não fazer?

Não se aplica movimento automático em elementos sem controle de usuário.

Não aplique elementos com movimento sem botão de pausa, pois prejudicam o controle pelo usuário.
Não insira GIFs animados e repetitivos, pois prejudicam a leitura e a concentração.
Não utilize carrosséis que avancem automaticamente, pois avançam conteúdo sem consentimento do usuário.
Não inclua conteúdos que pisquem acima do limite de flashes por segundo, pois podem causar crises em pessoas fotossensiveis.
Não implemente animações em CSS sem oferecer opção de desativação, pois impedem o controle do movimento.

Normas de referência

WCAG 2.2.2; 2.3.1; 2.3.2; NBR 17225; eMAG.

WCAG 2.2.2 (Pausar, parar, ocultar): permite controle do movimento.
WCAG 2.3.1 (Três flashes ou abaixo do limite): previne riscos de crises epilépticas.
WCAG 2.3.2 (Três flashes – nível AAA): elimina totalmente flashes perigosos.
NBR 17225 e eMAG (guia de acessibilidade para governo eletrônico) reforçam a importância de segurança e controle de movimento em interfaces públicas.

Outras normas relacionadas:

WCAG 2.2.1 (Tempo ajustável): garante controle sobre limites de tempo.
WCAG 2.2.3 (Sem limite de tempo): evita restrições temporais desnecessárias.

Saiba mais

Guias sobre movimento e segurança visual.

W3C – WCAG sobre movimento e animação: https://www.w3.org/WAI/WCAG21/quickref/#pause-stop-hide;
WebAIM – Animation and Flashing Content: https://webaim.org/resources/evalquickref/
Ferramenta PEAT (Photosensitive Epilepsy Analysis Tool): https://trace.umd.edu/peat/
eMAG – Diretrizes sobre carrosséis e banners animados: https://emag.governoeletronico.gov.br/

Índice