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 possa ter parecido um efeito chamativo, cria barreiras de acessibilidade sérias 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 do seu markup para garantir conformidade e evitar problemas em qualquer ambiente que ainda possa suportá-lo.
Porque isto é um problema de acessibilidade
Conteúdo intermitente afeta vários grupos de utilizadores:
- Utilizadores com deficiências cognitivas podem achar o texto intermitente distrativo ou incompreensível. O piscar constante pode tornar muito difícil focar-se 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 ligações ou botões intermitentes, 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 devido ao conteúdo intermitente, dependendo da frequência.
Esta regra relaciona-se com o 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, intermitente, ou em deslocamento que inicia automaticamente e dura mais de cinco segundos, os utilizadores devem conseguir pausar, parar, ou ocultá-lo. Como o elemento <blink> não fornece mecanismo para os utilizadores controlarem o piscar, falha este critério completamente.
Esta regra também se aplica à Secção 508 §1194.22(j), que estabelece que as páginas devem ser desenhadas para evitar causar cintilação no ecrã com uma frequência superior a 2 Hz e inferior a 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, uma vez que este é o equivalente CSS do elemento<blink>. - Use técnicas de ênfase alternativas para destacar conteúdo — texto em negrito, cor, tamanho de letra maior, bordas, destaques de fundo, ou ícones.
Importante: Muitos navegadores modernos ignoram silenciosamente o elemento <blink>, por isso o texto não piscará visualmente mesmo que o elemento esteja presente no código fonte. Não confie em como a página se apresenta no navegador para determinar se existem tags <blink>. Verifique sempre o código HTML real.
Exemplos
Incorreto: usar o elemento <blink>
<p><blink>Saldos de Mudança Quinta-feira!</blink></p>
Isto faz com que o texto pisque continuamente (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">Oferta por Tempo Limitado!</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>Saldos de Mudança Quinta-feira!</strong></p>
Usar <strong> torna o texto em 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">Oferta por Tempo Limitado!</p>
Isto chama a atenção para o conteúdo usando cor, uma borda, e texto em negrito — tudo sem qualquer piscar ou intermitência, mantendo o conteúdo legível e acessível para todos.
Ajude-nos a melhorar os nossos guias
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.