2 problemas documentados

Imagens e Alternativas Textuais

Como fornecer texto alternativo adequado para imagens, ícones, gráficos e imagens decorativas.

Imagens Formulários Contraste Estrutura Links Acessibilidade Tabelas Multimídia:

WCAG A

Imagem sem atributo alt

Todo elemento <img> deve ter um atributo alt. A ausência do atributo faz com que leitores de tela leiam o nome do arquivo, que raramente é útil ao usuário.

Impacto por tipo de deficiência

Cegueira

Leitor de tela anuncia o nome do arquivo (ex: "img_20231105_banner.jpg") — sem contexto ou informação.

Baixa visão

Quando a imagem não carrega, apenas o texto alternativo é exibido — sem alt, nada é exibido.

Cognitiva

Usuários que dependem de imagens para compreensão perdem o contexto visual sem uma descrição textual.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Sem alt — leitor de tela lê o nome do arquivo -->
<img src="/img/foto-perfil-usuario.jpg">

<!-- ❌ Alt vazio em imagem informativa -->
<img src="/img/grafico-resultados.png" alt="">

Correto — acessível para todos os usuários

<!-- ✓ Imagem informativa com alt descritivo -->
<img src="/img/foto-perfil-usuario.jpg" alt="Maria Silva, Gestora de TI">

<!-- ✓ Imagem decorativa: alt vazio intencional -->
<img src="/img/divider.png" alt="" role="presentation">

<!-- ✓ Gráfico complexo: alt resumido + descrição longa -->
<img
  src="/img/grafico-resultados.png"
  alt="Gráfico de barras: conformidade por órgão (2024)"
  aria-describedby="desc-grafico"
>
<div id="desc-grafico" class="sr-only">
  Secretaria de TI: 87%. Ministério X: 72%. Agência Y: 45%...
</div>

Técnicas ARIA relevantes

aria-describedbyaria-labelrole="presentation"

WCAG A

Imagem usada como botão sem nome acessível

WCAG 1.1.1WCAG 4.1.2eMAG 1.8 eMAG 6.1

Quando uma imagem é o único conteúdo de um botão ou link, o alt da imagem torna-se o nome acessível do controle interativo.

Impacto por tipo de deficiência

Cegueira

Leitor de tela anuncia "botão" ou o nome do arquivo sem dizer qual ação o botão executa.

Motora

Software de reconhecimento de voz não consegue ativar o botão por comando de voz sem saber seu nome.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Botão de busca sem nome acessível -->
<button>
  <img src="/img/icon-search.svg">
</button>

<!-- ❌ Link com ícone sem texto -->
<a href="/perfil">
  <img src="/img/user-icon.png">
</a>

Correto — acessível para todos os usuários

<!-- ✓ Ícone SVG com title ou aria-label -->
<button aria-label="Buscar">
  <svg aria-hidden="true" focusable="false" ...>...</svg>
</button>

<!-- ✓ Imagem como botão com alt descritivo -->
<button>
  <img src="/img/icon-search.svg" alt="Buscar">
</button>

<!-- ✓ Link com texto visível + ícone decorativo -->
<a href="/perfil">
  <img src="/img/user-icon.png" alt="" aria-hidden="true">
  <span>Meu perfil</span>
</a>

Técnicas ARIA relevantes

aria-labelaria-hidden="true"focusable="false"

Próxima categoria

📋 Formulários Acessíveis

Ver todas as categorias do Guia