Regra de acessibilidade: As imagens devem ter texto alternativo

Sobre esta regra de acessibilidade

As imagens são uma parte fundamental do conteúdo web, mas são inerentemente visuais. Os leitores de ecrã não conseguem interpretar os pixels de uma imagem — dependem inteiramente de uma alternativa textual para descrever o conteúdo e propósito da imagem ao utilizador. Sem texto alternativo, um leitor de ecrã pode ler o nome do ficheiro da imagem (por exemplo, “IMG_20230415_093012.jpg”), que não tem significado e é confuso. No pior caso, a imagem é ignorada silenciosamente e o utilizador perde informação crítica.

Esta regra afeta principalmente pessoas cegas ou surdocegas, que dependem de leitores de ecrã ou displays braille para aceder ao conteúdo. Utilizadores com baixa visão que dependem de ampliação de texto ou modos de alto contraste também podem beneficiar de texto alternativo bem escrito.

Porquê que isto é importante

Esta regra corresponde ao Critério de Sucesso 1.1.1 do WCAG 2.2: Conteúdo não textual (Nível A), que exige que todo o conteúdo não textual apresentado ao utilizador tenha uma alternativa textual que sirva um propósito equivalente. É também exigido pela Section 508 e EN 301 549. Por ser um requisito de Nível A, representa a base mínima absoluta para acessibilidade — falhar nisto significa que o seu conteúdo é fundamentalmente inacessível para muitos utilizadores.

Como fornecer texto alternativo

Existem três técnicas principais para dar a uma imagem texto alternativo acessível:

O atributo alt — o método mais comum e preferido para elementos <img>.
O atributo aria-label — fornece um nome acessível diretamente no elemento.
O atributo aria-labelledby — aponta para o id de outro elemento que contém o texto descritivo.

Escrever bom texto alternativo

Ao escrever texto alternativo, considere estas questões:

Porque está esta imagem aqui? Que papel desempenha no conteúdo?
Que informação transmite? O que um utilizador vidente retiraria dela?
Se removesse a imagem, que palavras a substituiriam para preservar o mesmo significado?

Mantenha o texto alternativo conciso e descritivo. Evite frases como “imagem de” ou “fotografia de” — os leitores de ecrã já anunciam o elemento como uma imagem. Não use o nome do ficheiro como texto alternativo. Foque-se no propósito e significado da imagem, não numa descrição pixel por pixel.

Lidar com imagens decorativas

Nem todas as imagens têm significado. Imagens decorativas — como separadores visuais, ornamentos de fundo, ou imagens cujo conteúdo está totalmente descrito no texto circundante — devem ser ocultadas da tecnologia assistiva. Para fazer isto, use um atributo alt vazio: alt="".

Não omita o atributo alt totalmente. Se alt estiver em falta, os leitores de ecrã irão frequentemente recorrer à leitura do nome do ficheiro, o que cria uma experiência pior do que não ter anúncio nenhum. Um alt="" vazio diz explicitamente ao leitor de ecrã para ignorar a imagem.

Também pode usar role="presentation" ou role="none" para marcar uma imagem como decorativa, mas um atributo alt vazio é mais simples e tem suporte mais amplo.

Exemplos

Incorreto: texto alternativo em falta

O atributo alt está completamente ausente. Um leitor de ecrã pode anunciar o nome do ficheiro em vez disso.

<img src="team-photo.jpg">

Incorreto: texto alternativo inútil

O texto alternativo contém o nome do ficheiro em vez de uma descrição significativa.

<img src="chart-q3.png" alt="chart-q3.png">

Correto: texto alternativo descritivo usando o atributo `alt`

<img src="team-photo.jpg" alt="A equipa de engenharia reunida à volta de um quadro branco durante uma sessão de planeamento">

Correto: texto alternativo usando `aria-label`

<img src="revenue-chart.png" aria-label="Gráfico de barras mostrando receitas trimestrais a aumentar de 2M€ em Q1 para 3,5M€ em Q4">

Correto: texto alternativo usando `aria-labelledby`

<p id="chart-desc">Gráfico de barras mostrando o crescimento das receitas trimestrais de Q1 para Q4 2024.</p>
<img src="revenue-chart.png" aria-labelledby="chart-desc">

Correto: imagem decorativa com alt vazio

Esta linha separadora não serve qualquer propósito informativo e deve ser ocultada dos leitores de ecrã.

<img src="decorative-line.svg" alt="">

Correto: imagem decorativa usando `role="presentation"`

<img src="decorative-swirl.png" role="presentation">

O que esta regra verifica

Esta regra do axe-core (image-alt) inspeciona todos os elementos <img> na página e verifica que têm uma alternativa textual acessível. Especificamente, verifica que cada <img> tem pelo menos uma das seguintes:

Um atributo alt não vazio
Um atributo aria-label
Um atributo aria-labelledby que referencia um elemento válido
Um alt="" vazio (ou role="presentation" / role="none") para indicar que a imagem é decorativa

Se nenhuma destas condições for atendida, a regra sinaliza a imagem como uma violação crítica de acessibilidade.

Learn more: