Guia rápido: Texto alternativo (ALT)
Texto alternativo
O texto alternativo (ALT) é a descrição que permite que pessoas com deficiência visual "enxerguem" uma imagem num ambiente digital. Essa descrição é lida pelos softwares de voz.
Se o campo estiver vazio ou com descrição incorreta, como por exemplo, nomes de arquivos (ex: banner_final_v2.png), o usuário perde o acesso à informação e à autonomia de navegação.
Toda imagem ou conteúdo não textual que seja relevante para a compreensão da informação, como fotos, gráficos, organogramas, ilustrações e imagens que substituem botões ou links, deve possuir um texto alternativo.
Exemplos Práticos: como escrever um ALT
| Tipo de Conteúdo | ❌ Texto alternativo Incorreto | ✅ Texto alternativo correto |
|---|---|---|
| Foto de Notícia | imagem01.jpg | Equipe técnica realiza manutenção em torre de energia no interior do país. |
| Banner com Texto | Banner informativo | Fundo azul com texto: 'Inscrições abertas para o curso de gestão. Prazo até 20/05'. |
| Gráficos | Grafico_final.png | Gráfico de pizza indicando que 70% dos acessos ao portal ocorrem via celular. |
Dicas importantes
1 - Seja breve na descrição!
- Descrever datas, títulos e frases importantes.
- Não dizer: "Imagem de..." O leitor de Tela já avisa que é uma imagem.
- Pensar na experiência de todos: textos longos dentro de imagens não podem ser aumentados, copiados ou lidos por aplicativos de acessibilidade.
2 - Atenção ao conteúdo dos banners de capa:
- Evitar a criação de artes com parágrafos de texto ou informações cruciais escritas apenas dentro da imagem. Como esses banners geralmente são links, o leitor de tela precisa de um Texto Alternativo (ALT) curto e objetivo para dizer ao usuário para onde aquele link o levará.
- Se o banner tem muito texto, fica impossível criar um ALT eficiente sem torná-lo cansativo ou confuso.
A boa prática para capas é:
- Usar o banner para atrair o olhar com uma frase curta e impacto visual.
- O ALT deve descrever o tema e o destino (Ex: "Banner sobre o novo prazo do IR").
- Deixar os detalhes, datas e explicações longas para a página de destino do link.
- Lembre-se: texto em imagem não redimensiona bem em celulares e é invisível para os motores de busca e leitores de tela!
3 - No caso de Infográficos, gráficos, diagramas, organogramas:
- Não se deve escrever um parágrafo gigante dentro do atributo ALT.
- Em vez disso, fazer o seguinte:
- no texto alternativo (ALT), descreva brevemente o que é a imagem e indique onde está a descrição completa, se no Corpo da Página (abaixo da imagem) ou link para outra página, que forneça a transcrição completa em formato html, listas ou tabelas.
Saiba mais sobre acessibilidade digital.