WCAG 2.2.2: Pausar, Parar, Ocultar

O que Esta Regra Significa

WCAG 2.2.2 (Pausar, Parar, Ocultar) é um critério de sucesso de Nível A sob o princípio Operável. Ela rege qualquer conteúdo que se mova, pisque, role ou seja atualizado automaticamente em uma página. A regra estabelece dois requisitos distintos dependendo de como o conteúdo se comporta:

Para conteúdo em movimento, piscando ou rolando que inicia automaticamente, dura mais de cinco segundos e é apresentado ao lado de outro conteúdo, os usuários devem receber um mecanismo para pausá-lo, pará-lo ou ocultá-lo. Isso abrange animações em CSS, carrosséis controlados por JavaScript, texto em marquee, elementos piscando, tickers rolantes e banners animados.

Para conteúdo com atualização automática — como placares ao vivo, tickers de ações, feeds de redes sociais ou manchetes de notícias que são atualizadas em intervalos — os usuários devem poder pausar, parar, ocultar ou controlar a frequência das atualizações.

Para ser aprovado, é necessário que um controle claramente operável (um botão, atalho de teclado ou mecanismo semelhante) esteja disponível antes ou ao lado do conteúdo animado, permitindo que os usuários o congelem ou removam sem precisar de ajuda. O próprio controle deve ser acessível — alcançável por teclado, devidamente rotulado e utilizável sem mouse.

Há falha quando qualquer um dos seguintes existir: um elemento <blink> ou CSS text-decoration: blink que não possa ser interrompido; um elemento <marquee> sem mecanismo de pausa; um carrossel animado que reproduz indefinidamente sem botão de pausa; um widget de notícias com atualização automática que não possa ser controlado; ou um vídeo de fundo em loop sem forma de pará-lo.

As WCAG definem duas exceções explícitas. Primeiro, a regra não se aplica a animações que duram cinco segundos ou menos, porque um movimento breve que termina por conta própria não cria uma distração prolongada. Segundo, ela não se aplica quando a animação é essencial para a atividade — por exemplo, uma interface de negociação de ações em tempo real em que os preços ao vivo são todo o propósito da página, e pausá-los mudaria fundamentalmente a natureza do conteúdo. Essas exceções são estreitas e não devem ser usadas como desculpa genérica para pular a implementação.

Por Que Isso Importa

Conteúdo em movimento e piscando cria barreiras sérias para vários grupos distintos de pessoas com deficiência, e as consequências variam de distração leve a dano médico real.

Pessoas com transtorno de déficit de atenção e hiperatividade (TDAH) ou outras deficiências cognitivas muitas vezes acham impossível focar no conteúdo principal de uma página quando elementos animados estão presentes em sua visão periférica. O cérebro humano é neurologicamente programado para prestar atenção ao movimento como mecanismo de sobrevivência, e pessoas com TDAH experimentam essa atração de forma muito mais intensa do que usuários neurotípicos. Um ticker rolante na parte inferior de uma página de notícias ou um banner publicitário animado em uma barra lateral podem tornar a leitura do artigo principal efetivamente impossível.

Pessoas com distúrbios vestibulares — incluindo labirintite, vertigem posicional paroxística benigna (VPPB) e doença de Ménière — podem sentir náusea, tontura e desorientação quando expostas a certos tipos de movimento na tela. Para essas pessoas, um carrossel em loop ou um efeito de rolagem parallax não é apenas irritante; pode causar mal-estar físico que as força a abandonar a página completamente. Distúrbios vestibulares afetam uma estimativa de 35% dos adultos com mais de 40 anos somente nos Estados Unidos.

Pessoas com epilepsia fotossensível correm risco de crises epilépticas devido a conteúdo que pisca ou pisca em determinadas frequências. Embora conteúdo com flashes seja abordado mais diretamente pela WCAG 2.3.1, conteúdo piscando coberto pela 2.2.2 também pode ser um fator desencadeante. A Organização Mundial da Saúde estima que a epilepsia afete aproximadamente 50 milhões de pessoas em todo o mundo.

Para usuários de leitores de tela, conteúdo com atualização automática cria um problema igualmente disruptivo. Quando uma região ao vivo é atualizada, os leitores de tela anunciam o novo conteúdo, o que interrompe o usuário no meio de uma frase enquanto ele está ouvindo outra coisa. Sem a capacidade de pausar as atualizações, navegar em uma página com conteúdo ao vivo torna-se extremamente difícil.

Considere este cenário do mundo real: uma pessoa com TDAH está concluindo uma transferência bancária online em um portal de internet banking de comércio eletrônico turco. Um banner promocional rotativo alterna entre quatro ofertas a cada três segundos no cabeçalho. A pessoa não consegue se concentrar em digitar o número de conta correto. Ela comete um erro de transcrição, a transferência falha e ela precisa repetir todo o processo. Se o banner tivesse incluído um botão de pausa, a tarefa teria sido simples. Isso não é hipotético — é uma categoria documentada de falha de interação que auditores de acessibilidade encontram regularmente.

Além do acesso para pessoas com deficiência, eliminar movimento incontrolável melhora a usabilidade para todos, reduz a carga cognitiva e pode melhorar sinais de SEO como as pontuações do Core Web Vitals ao reduzir mudanças de layout e execução desnecessária de JavaScript.

Regras Relacionadas do Axe-core

• blink: Esta regra verifica a presença do elemento HTML obsoleto <blink> e de propriedades CSS que produzem texto piscando (historicamente text-decoration: blink). O elemento <blink> faz o texto piscar continuamente, sem mecanismo nativo para o usuário interrompê-lo. O Axe sinaliza qualquer instância desse elemento como violação porque ele falha diretamente na 2.2.2 — não há caso de uso conforme para <blink>. A regra também alerta sobre efeitos de piscar controlados por CSS em que a animação não pode ser pausada. A detecção automatizada é confiável aqui porque o elemento e a propriedade são identificáveis sintaticamente no DOM e nos estilos computados.
• marquee: Esta regra verifica a presença do elemento HTML <marquee>, que faz o texto ou conteúdo rolar horizontal ou verticalmente pela tela em um loop contínuo. O elemento <marquee> não possui mecanismo de pausa acessível embutido e é obsoleto no HTML5. O Axe sinaliza qualquer instância como violação. Assim como <blink>, a detecção é simples porque o elemento é identificável sintaticamente. No entanto, ferramentas automatizadas não podem capturar todas as violações da 2.2.2 — animações em CSS, carrosséis em JavaScript, widgets AJAX com atualização automática e vídeos HTML5 em loop exigem revisão manual porque o mecanismo de pausa (ou sua ausência) só pode ser determinado por uma pessoa testadora avaliando toda a experiência interativa.

Como Testar

1. Varredura automatizada com axe DevTools ou Lighthouse: Abra a página no Chrome ou Firefox. Abra o DevTools (F12), navegue até o painel do axe DevTools ou a auditoria de Acessibilidade do Lighthouse e execute uma varredura completa. Procure especificamente por violações marcadas como blink ou marquee nos resultados. Cada violação incluirá o nó do DOM, o nível de impacto (grave ou crítico) e um link para orientações de correção. Observe que uma varredura automatizada limpa não significa conformidade total — prossiga para as etapas manuais.
2. Inspeção manual de animações em CSS e JavaScript: Revise visualmente a página em busca de qualquer conteúdo que se mova, role, pisque ou seja atualizado automaticamente. Para cada instância, verifique se um controle de pausar, parar ou ocultar está presente e visível antes ou ao lado do conteúdo animado. Verifique se o controle é alcançável por teclado (use Tab até ele) e se pressionar Enter ou Espaço o ativa. Verifique se ativar o controle realmente interrompe o movimento e não apenas reduz sua velocidade.
3. Teste somente com teclado: Desconecte o mouse. Use a tecla Tab para navegar por toda a página. Confirme que você consegue alcançar o controle de pausar/parar para cada elemento animado usando apenas o teclado, e que o controle tem um indicador de foco visível. Se você não conseguir alcançar o controle, ou se alcançá-lo exigir tabulação através do conteúdo animado primeiro (o que pode ser desorientador), isso é uma falha.
4. Teste com leitor de tela usando NVDA e Firefox: Inicie o NVDA, abra a página no Firefox e ouça quaisquer anúncios de regiões ao vivo que interrompam a leitura. Navegue até o conteúdo com atualização automática e confirme que usar o controle de pausa silencia os anúncios do NVDA. Teste com JAWS e Chrome, e VoiceOver e Safari no macOS, seguindo o mesmo procedimento.
5. Verificação de conteúdo com atualização automática: Para conteúdo que é atualizado em um temporizador (feeds de notícias, dashboards, placares), observe o intervalo de atualização. Confirme que há um mecanismo para pausar as atualizações ou controlar a frequência. Dispare a atualização manualmente, se possível, e verifique se os leitores de tela só a anunciam quando a pessoa usuária escolhe, e não de forma involuntária.
6. Teste de preferência por movimento reduzido: No seu sistema operacional, ative a configuração de acessibilidade "Reduzir movimento". Recarregue a página e verifique se as animações respeitam a media query CSS prefers-reduced-motion. Embora isso não seja estritamente exigido pela WCAG 2.2.2, é uma técnica complementar forte e é cada vez mais esperado por auditores.

Como Corrigir

Elemento <marquee> obsoleto — Incorreto

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Elemento <marquee> obsoleto — Correto

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Elemento <blink> obsoleto — Incorreto

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Elemento <blink> obsoleto — Correto

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Carrossel com reprodução automática sem controle de pausa — Incorreto

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Carrossel com reprodução automática sem controle de pausa — Correto

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Widget de dados ao vivo com atualização automática — Incorreto

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Widget de dados ao vivo com atualização automática — Correto

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Erros Comuns

• Usar elementos <marquee> ou <blink> em qualquer lugar no HTML de produção, mesmo para estilo "retrô" ou decorativo — ambos os elementos são obsoletos, semanticamente sem sentido e sempre falham na 2.2.2 sem caminho de correção além da remoção.
• Adicionar um botão de pausa que só fica visível ao passar o mouse, tornando-o inacessível para pessoas que usam apenas teclado, que são justamente as que mais precisam dele e que normalmente navegam com Tab em vez de passar o mouse.
• Implementar um botão de pausa que não é alcançável pela tecla Tab antes do conteúdo animado no DOM, forçando as pessoas a navegar pelo movimento desorientador antes de poderem pará-lo.
• Usar animation-play-state: paused em CSS para interromper a animação visualmente, mas não desativar também o loop setInterval ou requestAnimationFrame em JavaScript que está gerando as atualizações de conteúdo — a aparência visual para, mas o DOM continua mudando, ainda interrompendo leitores de tela.
• Definir aria-live='polite' em um carrossel ou ticker e deixá-lo ativo mesmo quando a pessoa usuária pressionou pausa — a região ao vivo continua anunciando mudanças no DOM para usuários de leitores de tela, embora a animação visual esteja congelada.
• Confiar em autoplay=false em um elemento <video> sem verificar o comportamento em diferentes navegadores; algumas combinações de navegador e plugin substituem esse atributo, fazendo com que vídeos sejam reproduzidos automaticamente contra a intenção da pessoa autora e a expectativa da pessoa usuária.
• Tratar a exceção de cinco segundos como um período de tolerância geral e construir um carrossel que mostra cada slide por quatro segundos, partindo do pressuposto de que cada transição individual de slide está abaixo de cinco segundos — a animação como um todo é contínua e dura muito mais do que cinco segundos, portanto a exceção não se aplica.
• Fornecer um controle de pausa que interrompe a animação, mas não indica visualmente o estado de pausa, deixando as pessoas incertas se sua ação teve algum efeito — o botão deve refletir seu estado atual, idealmente usando aria-pressed e atualizando seu rótulo entre "Pause" e "Play".
• Aplicar prefers-reduced-motion apenas a transições em CSS e ignorar animações controladas por JavaScript que rodam independentemente do CSS, o que significa que pessoas que ativaram a configuração de sistema para reduzir movimento ainda experimentam movimento na página.
• Colocar o controle de pausa fora da ordem de tabulação do teclado definindo tabindex='-1' ou colocando-o em um contêiner com display:none que é exibido condicionalmente apenas com interação de mouse — o controle deve ser sempre alcançável por navegação via teclado.

Relação com os Regulamentos de Acessibilidade da Turquia

A Circular Presidencial nº 2025/10 da Turquia, publicada no Diário Oficial (Resmî Gazete) de número 32933 em 21 de junho de 2025, estabelece requisitos obrigatórios de acessibilidade web e móvel alinhados com a WCAG 2.2. A WCAG 2.2.2 Pausar, Parar, Ocultar é um critério de Nível A, o que significa que está no nível mais fundamental de conformidade e é obrigatório sem exceção para todas as entidades abrangidas pela circular.

A circular define cronogramas de conformidade escalonados: instituições e órgãos públicos devem alcançar conformidade total de Nível A dentro de um ano a partir da data de publicação da circular, e entidades do setor privado devem fazê-lo em dois anos. Não há adesão voluntária — a circular impõe uma obrigação legal, e propriedades digitais não conformes estão sujeitas à supervisão administrativa e a possíveis ações de fiscalização.

As entidades abrangidas pela circular incluem uma ampla seção transversal de serviços digitais turcos: todas as instituições públicas e órgãos governamentais; plataformas de comércio eletrônico que operam na Turquia; bancos e instituições de serviços financeiros; hospitais e prestadores de serviços de saúde privados; operadoras de telecomunicações com 200.000 ou mais assinantes; agências de viagem; empresas de transporte privado; e escolas privadas com autorização do Ministério da Educação Nacional (Millî Eğitim Bakanlığı, MoNE).

Para essas entidades, a WCAG 2.2.2 tem implicações diretas e práticas. Um site de comércio eletrônico com um carrossel de produtos com reprodução automática e sem botão de pausa está em violação. O portal de internet banking de um banco que usa um ticker de avisos de segurança rolante sem controle de parada está não conforme. A página de agendamento de consultas de um hospital que usa alertas animados que não podem ser interrompidos falha no requisito. A página inicial de uma empresa de telecomunicações com um vídeo de fundo em loop e sem controle de parada visível deve corrigi-lo antes do prazo.

Além da obrigação legal, a legislação de acessibilidade turca está alinhada com a tendência europeia mais ampla exemplificada pela Diretiva de Acessibilidade Web da UE e pelo Ato Europeu de Acessibilidade (EAA). À medida que empresas turcas se expandem para mercados europeus ou atendem usuários europeus, a conformidade com a WCAG 2.2 Nível A — incluindo o critério 2.2.2 — torna-se um requisito de conformidade duplo. Implementar corretamente Pausar, Parar, Ocultar é, portanto, tanto uma necessidade legal doméstica quanto um ativo estratégico para organizações turcas com presença digital internacional.