Imagens acessíveis na prática — alt/decorativa/diagrama 2025

Introdução

SEO e acessibilidade se tocam, mas têm objetivos diferentes. Este artigo foca no alt que “comunica” e detalha regras práticas de implementação. Para SEO, veja SEO de Imagens 2025 — Alt, dados estruturados e sitemaps na prática.

Princípios de design do alt

• Decorativa: alt vazio (alt="") para silenciar o leitor
• Informativa: resuma o ponto-chave do texto, estilo nominal
• Diagramas/infográficos: alt com intenção + unidades; detalhes e números no corpo

Casos comuns

• Imagem com link: o alt deve expressar o propósito do link. Evite nomes de arquivo e redundâncias
• Substituto de OGP: imagem OGP tende a duplicar o conteúdo; evite alt excessivo (design em Design de miniaturas OGP 2025 — Legível, leve, no enquadramento)

Erros de implementação

• Uso indiscriminado de role="presentation": não apague semântica útil
• Sobrecarga de imagem: ajuste srcset/sizes ao layout (ver Imagens responsivas em 2025 — Guia prático de srcset/sizes)

Dicas práticas

Melhore a legibilidade de diagramas recortando bem com Recortador de Imagem e gere srcset com Gerador de Srcset. Para miniaturas sociais, use Criador de miniaturas OGP.

Decisão inicial: decorativa, informativa ou UI?

1. Decorativa (apenas atmosfera) → alt=""; role="presentation" é desnecessário
2. Informativa (necessária para entender o texto) → alt conciso com o ponto-chave; evite duplicar o corpo
3. UI (botão/ícone) → o nome acessível deve alinhar com a etiqueta visível

Contrato de decisão (regras pequenas)

• O alt deve ser uma frase que faça sentido lida naquele lugar
• Evite termos redundantes como “imagem” ou “foto”
• Em diagramas, alt contém apenas intenção + unidades; detalhes no corpo

Bons e maus exemplos de alt

• Ruim: alt="gráfico"

  • Problema: falta de que e de tendência

• Bom: alt="Vendas mensais de 2024. Tendência de alta no Q4"

• Ruim: alt="botão"

• Bom: alt="Adicionar ao carrinho" (propósito do botão)

• Ruim: alt="logo da empresa"

• Bom: alt="Unified Image Tools" (se for link, alinhe ao destino)

Diagramas/infográficos (textos longos vão para o corpo)

• Alt traz a intenção. Tabelas, valores e notas ficam no corpo, próximos ao gráfico
• Em casos complexos, use <figcaption>; leitores entendem melhor o contexto

Exemplo (Next.js)

<figure>
  <Image src="/charts/sales-2024.png" alt="Vendas mensais de 2024. Tendência de alta no Q4" width={960} height={540} />
  <figcaption>Sobe a partir de julho. Unidade: mil reais</figcaption>
  {/* Evite repetir no alt o que o gráfico já expressa. */}
  {/* Ajuste srcset/sizes ao layout. */}
  {/* Detalhes numéricos vão fora do alt. */}
</figure>

Ícones de UI e nomes acessíveis

• Ícone puramente decorativo → alt=""
• Se houver etiqueta visível, deixe alt="" e use o texto da etiqueta
• Só ícone? Forneça aria-label com a intenção

Padrões em React/Next.js

// Ícone com etiqueta visível
<button type="button">
  <img src="/icons/cart.svg" alt="" aria-hidden="true" />
  Adicionar ao carrinho
  </button>

// Ícone sem etiqueta visível
<button type="button" aria-label="Buscar">
  <img src="/icons/search.svg" alt="" aria-hidden="true" />
</button>

Otimização de imagem e acessibilidade

• Imagem LCP: priorize/precarregue, mas mantenha alt conciso
• Otimize sizes/srcset para evitar sobrecarga; banda impacta diretamente tecnologias assistivas
• Para contraste de texto em imagem, mire 7:1; idealmente, leve o texto para HTML

Imagens de OGP/compartilhamento

• Evite alt redundante em miniaturas OGP; muitas previews ignoram
• Garanta que o corpo cubra a ideia principal e use alt mínimo se inserir a mesma imagem no artigo
• Design de OGP: Design de miniaturas OGP 2025 — Legível, leve, no enquadramento

Testes e verificação

• NVDA/VoiceOver para revisar ordem e redundâncias
• Automação com Axe/Pa11y para detectar alt vazios/ausentes inadequados
• Em páginas reais, teste foco por teclado e falhas de carregamento de imagens

Checklist (antes de publicar)

• Decorativas silenciadas com alt=""?
• Informativas concisas e sem duplicar o corpo?
• Ícones de UI com nome acessível que reflete o propósito?
• Diagramas com intenção no alt e detalhes no corpo/caption?
• Otimização (srcset/sizes, formato, preload) sem atrapalhar a leitura?

Resumo

“Decorativa: silencie; informativa: concisa; diagrama: intenção no alt”. Com essas regras, você equilibra leitura com leitor de tela e desempenho. Em UI, alinhe o nome acessível ao propósito e mova detalhes do diagrama para o corpo, evitando redundâncias.

Relacionados

• SEO de Imagens 2025 — Alt, dados estruturados e sitemaps na prática
• Imagens responsivas em 2025 — Guia prático de srcset/sizes
• Gerador de Srcset