O que é texto alternativo
Texto alternativo é a descrição de uma imagem no HTML. O leitor de tela anuncia esse texto, e o navegador o apresenta quando a imagem não carrega.
A descrição serve à leitura assistida. Por isso, ela explica o conteúdo e a função, e não a aparência dos pixels.
Quando descrever e quando omitir
A imagem informativa recebe uma descrição que substitui o que ela comunica. Um gráfico aponta a conclusão, e uma foto de produto nomeia o item e o detalhe relevante.
A imagem decorativa recebe o atributo vazio. O leitor de tela ignora o elemento, e a leitura não é interrompida por uma descrição sem função.
O que evitar
Evite repetir o título ao lado e começar com “imagem de”. Evite também uma lista de cores e posições que não explica o conteúdo.
O texto não deve prometer o que a imagem não mostra. Uma foto de grupo não comprova atendimento, e a descrição precisa ficar no que está visível.
Exemplo
Como conferir
Percorra a página com um leitor de tela e confira cada imagem. Verifique se a descrição substitui o conteúdo e se a imagem decorativa foi ignorada. Leia o texto sem olhar a imagem.
O UX writing orienta a clareza da descrição. A interface precisa reservar espaço para a imagem e para o texto que a acompanha.
Dúvidas frequentes
Perguntas frequentes sobre Texto alternativo
- Toda imagem precisa de texto alternativo?
- Toda imagem informativa precisa. A imagem decorativa recebe o atributo vazio, para que o leitor de tela não anuncie algo sem função.
- O texto deve começar com imagem de?
- Não. O leitor de tela já anuncia que se trata de uma imagem. O texto descreve o conteúdo e a função, sem repetir o aviso.
- Como descrever um gráfico?
- O texto aponta a conclusão que o gráfico apresenta e, quando necessário, indica a tabela com os números. A descrição visual sozinha não substitui os valores.
- O texto alternativo influencia o SEO?
- Ele contribui para entender a imagem e a página, sem repetir a palavra-chave. A descrição precisa servir à leitura assistida.
Para continuar
Recursos relacionados
Documentação
W3C: texto alternativo
Orienta a descrição de imagens informativas e decorativas.
Abrir recursoDocumentação
MDN: atributo alt
Descreve o atributo e o efeito no navegador e no leitor de tela.
Abrir recursoAplicação na formação
Vibe Coding: Do Zero ao MVP
Na Formação Vibe Coding, o texto alternativo entra na revisão da tela e na instrução que o agente recebe sobre imagens.
Conhecer a formação
Fontes consultadas
Referências deste verbete
Este verbete ajudou você?
Obrigado pela resposta. Ela fica salva apenas neste navegador.