Skip to main content

Sobre esta regra de acessibilidade

O elemento <blink> foi outrora utilizado para chamar a atenção para o conteúdo fazendo-o piscar repetidamente. Embora pudesse parecer um efeito chamativo, cria barreiras sérias de acessibilidade para múltiplos grupos de utilizadores. O elemento foi depreciado da especificação HTML e, embora a maioria dos navegadores modernos já não renderize o efeito piscante, o elemento deve ainda assim ser removido do seu markup para garantir conformidade e evitar problemas em qualquer ambiente que ainda possa suportá-lo.

Porque isto é um problema de acessibilidade

O conteúdo piscante afeta vários grupos de utilizadores:

  • Utilizadores com deficiências cognitivas podem achar o texto piscante distrativo ou incompreensível. O piscar constante pode tornar muito difícil focar e compreender o conteúdo.
  • Utilizadores com baixa visão têm dificuldade em ler texto que aparece e desaparece rapidamente. A visibilidade intermitente torna o conteúdo efetivamente ilegível.
  • Utilizadores com deficiências motoras podem ter dificuldade em clicar em links ou botões piscantes, uma vez que o alvo não está consistentemente visível e requer timing preciso para ativar.
  • Utilizadores com condições fotossensíveis podem experienciar desconforto ou, em casos extremos, convulsões devido ao conteúdo piscante, dependendo da frequência.

Esta regra relaciona-se com o Critério de Sucesso 2.2.2 das WCAG 2.2: Pausar, Parar, Ocultar (Nível A), que exige que para qualquer conteúdo em movimento, piscante ou com scroll que inicie automaticamente e dure mais de cinco segundos, os utilizadores devem poder pausar, parar ou ocultá-lo. Uma vez que o elemento <blink> não fornece nenhum mecanismo para os utilizadores controlarem o piscar, falha completamente este critério.

Esta regra também se aplica à Secção 508 §1194.22(j), que estabelece que as páginas devem ser desenhadas para evitar fazer o ecrã piscar com uma frequência superior a 2 Hz e inferior a 55 Hz.

Como corrigir

  1. Remova todos os elementos <blink> do seu HTML. Substitua-os por elementos padrão como <span>, <strong> ou <em>.
  2. Remova text-decoration: blink; do seu CSS, pois esta é a equivalente CSS do elemento <blink>.
  3. Use técnicas alternativas de ênfase para fazer o conteúdo destacar-se — texto em negrito, cor, tamanho de fonte maior, bordas, realces de fundo ou ícones.

Importante: Muitos navegadores modernos ignoram silenciosamente o elemento <blink>, pelo que o texto não piscará visualmente mesmo que o elemento esteja presente no código fonte. Não se baseie na aparência da página no navegador para determinar se existem tags <blink>. Verifique sempre o código HTML atual.

Exemplos

Incorreto: usar o elemento <blink>

<p><blink>Moving Sale Thursday!</blink></p>

Isto faz com que o texto pisque repetidamente (em navegadores que o suportam), tornando-o inacessível.

Incorreto: usar text-decoration: blink no CSS

<style>
  .attention {
    text-decoration: blink;
  }
</style>
<h2 class="attention">Limited Time Offer!</h2>

O valor CSS text-decoration: blink consegue o mesmo efeito inacessível que o elemento <blink>.

Correto: usar ênfase visual estática

<p><strong>Moving Sale Thursday!</strong></p>

Usar <strong> torna o texto negrito e transmite ênfase aos leitores de ecrã sem qualquer piscar.

Correto: usar CSS para ênfase visual sem piscar

<style>
  .highlight {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 8px 12px;
    font-weight: bold;
  }
</style>
<p class="highlight">Limited Time Offer!</p>

Isto chama a atenção para o conteúdo usando cor, uma borda e texto em negrito — tudo sem qualquer piscar ou piscadela, mantendo o conteúdo legível e acessível para todos.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Detecte problemas de acessibilidade automaticamente

O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.