Regra de acessibilidade: Elementos `<blink>` estão obsoletos e não devem ser utilizados

Sobre esta regra de acessibilidade

O elemento <blink> foi uma vez utilizado para chamar atenção ao conteúdo fazendo-o piscar repetidamente. Embora possa ter parecido um efeito chamativo, cria sérias barreiras 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 ser removido da sua marcação para garantir conformidade e evitar problemas em qualquer ambiente que ainda possa suportá-lo.

Por que isto é um problema de acessibilidade

Conteúdo piscante afeta vários grupos de utilizadores:

Utilizadores com deficiências cognitivas podem achar 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 tempo preciso para ativar.
Utilizadores com condições fotossensíveis podem experienciar desconforto ou, em casos extremos, convulsões de conteúdo piscante, dependendo da frequência.

Esta regra relaciona-se com WCAG 2.2 Critério de Sucesso 2.2.2: Pausar, Parar, Ocultar (Nível A), que requer que para qualquer conteúdo em movimento, piscante ou deslizante que comece 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 projetadas para evitar fazer o ecrã piscar com uma frequência maior que 2 Hz e menor que 55 Hz.

Como corrigir

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

Importante: Muitos navegadores modernos ignoram silenciosamente o elemento <blink>, então o texto não irá piscar visualmente mesmo que o elemento esteja presente no código fonte. Não confie em como a página aparece no navegador para determinar se tags <blink> existem. Verifique sempre o código HTML real.

Exemplos

Incorreto: usar o elemento `<blink>`

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

Isto faz com que o texto pisque ligando e desligando (em navegadores que o suportem), tornando-o inacessível.

Incorreto: usar `text-decoration: blink` em 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 atenção ao conteúdo usando cor, uma borda e texto negrito — tudo sem qualquer piscar ou piscadela, mantendo o conteúdo legível e acessível para todos.

Learn more: