Skip to content

Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →

Barrierefreiheit

Por que o conteúdo em movimento nos sites precisa de uma função de pausa?

O conteúdo em movimento precisa de uma função de pausa, porque o movimento atrai inevitavelmente o olhar: ao lado de um carrossel de imagem em execução, pessoas com transtornos de atenção ou leitura não conseguem captar o texto real. As WCAG portanto exigem: tudo o que se move, pisca ou rola automaticamente e dura mais de cinco segundos deve ser pausável, parável ou ocultável. Isso também se aplica ao conteúdo que se auto-atualiza como tickers.

Carrosséis, texto rolante e vídeos de fundo

Os executores mais comuns são carrosséis de página inicial que mudam a imagem a cada poucos segundos, vídeos de fundo atrás da manchete principal e tickers de notícias. Para muitos visitantes, é um teste de paciência, para alguns uma barreira real: quem lê lentamente perde a frase quando a imagem abaixo muda. Quem tem um transtorno de atenção não consegue afastar o olhar da movimento. A solução é simples — um botão de pausa visível diretamente no elemento em movimento, operável por mouse e teclado. Ainda melhor: o carrossel não muda automaticamente, mas apenas quando os visitantes fazem scroll eles mesmos.

Como o serviço de verificação testa conteúdo em movimento

A execução automática reconhece com segurança os elementos antigos de piscar e texto rolante no código-fonte — eles são considerados uma violação deste critério. Os carrosséis e vídeos de fundo modernos são, por outro lado, componentes tecnicamente normais, cujo comportamento se revela apenas durante a visualização: ele é executado por mais de cinco segundos, há um botão de pausa, é acessível via teclado. Essas questões são avaliadas por uma pessoa. O relatório de verificação mostra cada critério WCAG individualmente — aprovado, violado, a verificar manualmente ou não verificável automaticamente — tornando visível qual parte da afirmação foi medida e qual permanece aberta.

Beispiele

Karussell ohne Pause

Verstoß
<div class="slider" data-autoplay="true" data-interval="4000">…</div>
Erfüllt
<div class="slider" data-autoplay="true" data-interval="4000">
  <button type="button" aria-pressed="false" class="pause">Anhalten</button>
  …
</div>

Bewegung, die länger als fünf Sekunden läuft und automatisch startet, braucht Anhalten, Stoppen oder Ausblenden.

  • Conte na sua página inicial tudo o que se move por si só: carrossel, vídeo, ticker, azulejos animados.
  • Dê a cada um desses elementos um botão de pausa visível, também acessível pelo teclado.
  • Alterne os carrosséis para navegação manual — os visitantes decidem quando o próximo slide aparece.
  • Remova elementos Blink e running text do código-fonte sem substituto; pertencem a uma era web diferente.
  • Respeite a configuração do sistema operacional «Reduzir movimento» e desative animações nesse caso.

Deutsche Fassung dieser Seite