O texto alternativo das imagens não deve ser repetido como texto

Por que isto é um problema

Os leitores de ecrã processam tanto o texto alternativo de uma imagem como qualquer texto visível à sua volta. Quando estes são idênticos, os utilizadores ouvem algo como “Página Inicial Página Inicial” — a mesma frase falada consecutivamente. Esta redundância é desorientante, atrasa os utilizadores e não adiciona valor. Em alguns casos pode até ser enganoso, fazendo com que os utilizadores pensem que existem dois elementos separados quando existe apenas um.

Este problema afeta principalmente utilizadores cegos e surdocegos que dependem de leitores de ecrã para interpretar o conteúdo da página. É sinalizado como uma melhor prática Deque e alinha-se com os princípios por trás do Critério de Sucesso WCAG 1.1.1 (Conteúdo Não Textual), que exige que o conteúdo não textual tenha uma alternativa textual que sirva um propósito equivalente — não duplicado.

Como corrigir

A correção depende do contexto:

1. Imagens decorativas ou redundantes dentro de links ou botões: Se o texto visível já descreve o propósito, defina alt="" na imagem. A imagem torna-se decorativa, e o leitor de ecrã lê apenas o texto visível.
2. Imagens que adicionam informação única: Se a imagem transmite algo que o texto adjacente não transmite, escreva texto alt que descreva apenas a informação adicional — não repita o que já está lá.
3. Botões de imagem (<input type="image">): O atributo alt serve como rótulo do botão. Certifique-se de que descreve claramente a ação (por exemplo, “Submeter,” “Pesquisar”) e não duplica texto colocado junto ao botão.

Dicas para escrever bom texto alternativo

• Descreva o propósito ou ação, não a aparência visual da imagem.
• Pergunte a si próprio: “Se eu removesse esta imagem, que palavras precisaria para transmitir a mesma informação?”
• Evite palavras de preenchimento como “imagem de,” “foto de,” ou nomes de ficheiros — adicionam ruído sem valor.
• Mantenha-o conciso e significativo.

Exemplos

Incorreto: texto alt duplica texto de link adjacente

O leitor de ecrã anuncia “Página Inicial Página Inicial” porque tanto o atributo alt como o texto visível dizem a mesma coisa.

<a href="index.html">
  <img src="home-icon.png" alt="Página Inicial" width="24" height="25">
  Página Inicial
</a>

Correto: alt vazio numa imagem redundante dentro de um link

Como o texto visível “Página Inicial” já descreve o link, o ícone é marcado como decorativo com alt="". O leitor de ecrã anuncia “Página Inicial” uma vez.

<a href="index.html">
  <img src="home-icon.png" alt="" width="24" height="25">
  Página Inicial
</a>

Incorreto: texto do botão duplicado junto a um botão de imagem

A palavra “Pesquisar” aparece tanto como texto alt no botão de imagem como texto visível adjacente, causando duplicação.

<input type="image" src="search.png" alt="Pesquisar">
<span>Pesquisar</span>

Correto: remover o texto adjacente redundante

Ao usar um botão de imagem, deixe o atributo alt ser o único rótulo e remova o texto duplicado.

<input type="image" src="search.png" alt="Pesquisar">

Correto: imagem adiciona informação única junto ao texto

Se a imagem transmite algo que o texto não transmite, escreva texto alt que capture apenas a informação única.

<a href="report.html">
  <img src="chart.png" alt="Gráfico de barras mostrando aumento de 40% no Q3" width="80" height="60">
  Relatório Trimestral
</a>

Aqui, o texto visível diz “Relatório Trimestral” enquanto o texto alt da imagem descreve o que o gráfico realmente mostra — sem duplicação, e ambas as informações são úteis.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type 'image'

→