O que é e por que todo mundo faz errado
O assunto aqui não é só escrever texto alternativo em imagens. É o conjunto de erros que aparecem quando você implementa alt text sem entender como o ecossistema de acessibilidade realmente funciona. Eu vejo isso todo dia em projetos de acessibilidade web.
O que geralmente aparece nos sintomas de altismo
Aqui estão os problemas mais comuns que eu observo na prática:
- Alt vazio em imagens informativas — Você coloca alt="" em qualquer imagem que "não precisa de descrição", e aí acaba se livrando de imagens que explicam gráficos, diagramas ou dados importantes. O correto é usar alt="" só em imagens puramente decorativas, onde remover o atributo inteiramente também seria aceitável.
- Texto repetitivo do arquivo — Imagens com nomes como "logo-empresa-2024-final-v3.png" viram alt="logo-empresa-2024-final-v3.png" e o leitor de tela lê isso em voz alta. Isso acontece porque quem configurou o sistema não revisou os valores manualmente.
- Descrições genéricas demais — Todo mundo usa alt="imagem de produto" em fotos de catálogos. Isso não ajuda ninguém. O contexto importa: alt="Camisa social azul marinho com bolso no peito, vista em fundo branco" é muito mais útil do que um rótulo genérico.
- Texto duplicado do conteúdo visual — Colocar alt="Gráfico de vendas em 2024" quando o gráfico já tem um título e uma legenda visível na página é redundância desnecessária. O usuário já vê o texto. O alt deve complementar, não repetir.
- Falta de alt em elementos SVG — SVGs frequentemente carregam alt="SVG" ou nada. Eles precisam de title, aria-label ou role="img" para funcionar corretamente com leitores de tela.
Como diagnosticar e corrigir na prática
O primeiro passo é rodar uma auditoria. Eu uso o axe-core via browser extension ou o Lighthouse do Chrome, mas eles só pegam erros óbvios. Para casos mais sutis, como alt text contextualmente inadequado, você precisa de revisão manual. Meu workflow usual:
👉 Clique no botão abaixo para saber mais sobre o assunto!
- Rodar o Lighthouse com o audit de acessibilidade ativado. Ele retorna erros e alertas em questão de minutos.
- Exportar os resultados e cruzar com o código-fonte da página para identificar padrões recorrentes.
- Revisar manualmente imagens que o audit não flagrou, especialmente SVGs e imagens em contextos dinâmicos (carrosséis, modais).
- Testar com um leitor de tela real — NVDA no Windows, VoiceOver no macOS. A leitura em voz alta mostra problemas que ferramentas automatizadas não captam.
Um caso que me marcou: estava revisando um site de e-commerce com mais de 4 mil produtos. O alt de cada imagem era gerado automaticamente a partir do nome do arquivo, que vinha do ERP. Quando testei com o NVDA, percebi que o leitor lia sequências como "SKU-8472912-variant-3-preto-p". Isso acontecia porque o campo de alt no CMS puxava o código do produto em vez de uma descrição legível. A solução foi criar um campo dedicado no CMS para o alt text, populá-lo durante o cadastro dos produtos e adicionar uma validação no formulário que bloqueia o salvamento se o campo estiver vazio para imagens não-decorativas. Isso eliminou o problema em cerca de duas semanas de implementação.
Pegadinhas que ninguém conta
O Lighthouse considera que imagens sem alt text são erro crítico. Mas ele não distingue entre imagens decorativas e informativas. Uma página com dezenas de ícones de navegação pode ser marcada como cheia de erros quando, na verdade, a maioria deles deveria ser removida ou ter alt="" propositalmente. O excesso de falsos positivos gasta tempo de auditoria sem valor real. Outro ponto: muitos desenvolvedores tratam alt como sinônimo de título da imagem (title attribute). São coisas diferentes. O title aparece como tooltip ao passar o mouse, enquanto o alt é lido por leitores de tela e mostrado quando a imagem não carrega. Misturar os dois gera uma experiência confusa para o usuário com deficiência visual.
Se o seu projeto tem muitas imagens geradas dinamicamente, considere usar aria-describedby para referenciar descrições mais longas que ficam em outros elementos da página. O alt deve ser conciso — uma frase ou duas no máximo. Descrições extensas vão para o descritivo, não para o atributo alt.
Alternativas quando o alt text não basta
Para imagens complexas como gráficos estatísticos, mapas ou infográficos, o alt text sozinho não transmite toda a informação. Nesses casos, a melhor prática é fornecer uma descrição longa em outro local da página, referenciada pelo atributo aria-describedby na imagem. Isso evita alt text gigantescos que prendem o usuário do leitor de tela por tempos desnecessários. Se você precisa de uma lista de verificação rápida, o WCAG 2.2 critério 1.1.1 cobre tudo isso. Não há motivo para não seguir, exceto pressão de prazo. E mesmo assim, corrigir depois custa mais do que fazer certo na primeira vez.
