Texto alternativo (o atributo alt de uma imagem em HTML) é a descrição em texto que substitui uma imagem para quem não pode vê-la — seja porque usa um leitor de tela, seja porque a imagem não carregou. É um dos recursos mais simples de acessibilidade e, ao mesmo tempo, um dos mais negligenciados.
O que acontece sem texto alternativo
Quando uma imagem não tem alt, um leitor de tela costuma anunciar apenas "imagem" ou lê o nome do arquivo em voz alta — algo como "IMG 20240512 WhatsApp". Em uma página com dez ou vinte imagens sem descrição, isso vira um ruído constante que não agrega nenhuma informação, obrigando a pessoa a adivinhar o conteúdo pelo contexto ao redor, quando existe algum.
Em páginas de produto, isso é ainda mais grave: sem texto alternativo, uma pessoa cega não tem nenhuma forma de saber a cor, o formato ou os detalhes visuais de um produto antes de decidir comprar — informação que uma pessoa vidente capta imediatamente ao olhar a foto.
Como escrever um bom texto alternativo
Um bom texto alternativo é descritivo, mas objetivo — não precisa (e não deve) começar com "imagem de" ou "foto de", porque leitores de tela já anunciam que é uma imagem antes de ler o texto. Em vez de alt="foto1.jpg", o ideal é algo como alt="Tênis esportivo branco com detalhes em azul, vista lateral". A descrição deve incluir a informação relevante para o contexto: em uma página de produto, cor e características importam; em um blog, o que a imagem ilustra em relação ao texto ao redor importa mais do que detalhes estéticos irrelevantes.
Imagens puramente decorativas — como uma linha divisória ou um ícone repetido sem função própria — devem ter alt="" (vazio, mas presente), o que sinaliza ao leitor de tela para simplesmente pular a imagem, sem interromper a leitura com algo desnecessário.
Casos que exigem mais cuidado
Gráficos, infográficos e capturas de tela com texto dentro da imagem exigem atenção redobrada: o texto dentro da imagem não é lido por leitor de tela nem indexado pelo Google, então a descrição em alt precisa transmitir a informação essencial, e idealmente o mesmo conteúdo deveria existir também como texto normal na página, não só dentro da imagem.
Botões feitos com ícones (como uma lupa para busca ou um carrinho para compras) também dependem desse princípio: sem um alt ou aria-label descrevendo a função, o botão vira um elemento sem sentido para quem não vê o ícone.
É um ajuste barato de implementar e com efeito direto — tanto na experiência de quem depende dele para entender o conteúdo, quanto na indexação de imagens em buscadores.
Um erro comum na hora de descrever
Um deslize frequente é escrever textos alternativos genéricos demais, como alt="produto" ou alt="foto do time", que tecnicamente cumprem a exigência de ter o atributo preenchido, mas não entregam informação nenhuma de fato. Outro exagero no sentido oposto é escrever descrições longas demais, com detalhes irrelevantes que atrapalham mais do que ajudam — uma foto de capa de blog não precisa de uma descrição de três linhas contando cada elemento visual, só o essencial para entender o contexto da imagem dentro do conteúdo.
O equilíbrio certo costuma ser: descrever o que realmente importa para quem não pode ver a imagem entender aquele trecho do conteúdo, nem mais, nem menos.
Uma boa forma de testar a própria descrição é lê-la em voz alta, sem olhar a imagem, e perguntar: essa frase sozinha dá informação suficiente para entender o que está sendo mostrado, no contexto daquela página?
Este conteúdo tem caráter informativo e não substitui uma auditoria técnica de acessibilidade feita por um especialista.
Pronto pra colocar o Barra de Acessibilidade pra trabalhar?
Crie sua conta na VEANET Plataforma e comece a usar o Barra de Acessibilidade em poucos minutos.
Quero o Barra de Acessibilidade →