Exemplos de texto alternativo: o que escrever para cada tipo de imagem

Exemplos de texto alternativo

Exemplos de texto alternativo: bons e ruins, por tipo de imagem | We.Inc

O que é texto alternativo, exemplos bons e ruins para logos, produtos, ícones, gráficos e imagens decorativas, os passos de decisão do W3C e um teste rápido para praticar.

O texto alternativo é o pequeno substituto escrito de uma imagem, definido no atributo alt da tag img. Os leitores de tela o leem em voz alta e os navegadores o mostram quando a imagem não carrega. Um bom texto alternativo diz o que a imagem significa naquele ponto da página; imagens decorativas recebem um alt vazio.

Exemplos rápidos por tipo de imagem

Imagem
Alt fraco
Alt melhor

Logo com link para a página inicial
Página inicial da Smith Roofing

Foto de produto
Bolsa tote de couro marrom com fivela de latão

Botão com ícone de busca
lupa
Buscar

Arabesco divisor
arabesco decorativo
(vazio: alt="")

Foto da equipe
Nossos quatro telhadistas em frente à van da oficina

Gráfico de vendas
Vendas por mês, detalhes na tabela abaixo

As palavras certas dependem do motivo de a imagem estar ali, não da aparência dela. Uma lupa dentro de um botão significa Buscar; a mesma forma usada como enfeite na página não significa nada. Faça as perguntas de prática e depois copie os padrões para a sua loja ou site.

Leia a situação em cada cartão de prática: o que a imagem mostra e onde ela fica na página.
Escolha, entre as três opções, o texto alternativo que você escreveria.
O cartão diz se a escolha funciona e qual passo da árvore de decisão do W3C se aplica.
Use a tabela de exemplos abaixo como referência ao adicionar imagens às suas próprias páginas.

Evite expressões como imagem de ou foto de. Os leitores de tela já anunciam que se trata de uma imagem.
Em fotos de produtos, cite os detalhes que um comprador perguntaria: cor, material, o que diferencia essa variação.
Se a mesma informação está em texto logo ao lado da imagem, um alt vazio evita dizer tudo duas vezes.
Nunca encha de palavras-chave. O Google avisa que preencher atributos alt com palavras-chave pode fazer seu site ser visto como spam.

Perguntas frequentes

O que significa alt em texto?

Alt é a abreviação de alternative (alternativo). O texto alternativo é o texto que substitui uma imagem: as palavras que o leitor de tela fala e o que o navegador mostra no lugar de uma imagem que não carrega. Ele fica no atributo alt do elemento img.

Toda imagem deve ter texto alternativo?

Toda img deve ter um atributo alt, mas nem toda precisa de palavras. A MDN explica que um alt vazio indica que a imagem não é parte essencial do conteúdo. Omitir o alt por completo é pior: alguns leitores de tela passam a ler o nome do arquivo.

Qual deve ser o tamanho do texto alternativo?

Curto o bastante para ser dito em um fôlego, na maioria das imagens. A árvore do W3C pede uma descrição breve para fotos simples. Gráficos e diagramas são a exceção: dê um rótulo curto no alt e coloque a informação completa em texto na página.

Texto alternativo ajuda no SEO?

Sim. O guia de imagens do Google diz que ele usa o texto alternativo junto com visão computacional e o conteúdo da página para entender as imagens. O próprio exemplo dele prefere filhote de dálmata brincando de buscar a um simples filhote, e alerta contra listas de palavras-chave.

Que texto alternativo um logo deve ter?

Se o logo leva à sua página inicial, o alt deve descrever o destino do link, como o nome da sua empresa mais página inicial. Se ele só aparece e o seu nome já está em texto ao lado, um alt vazio serve.

A árvore de decisão do W3C em palavras simples

Primeiro, a imagem contém texto? Se esse texto também aparece por perto como texto real, use um alt vazio; se não, coloque o texto no alt. Depois, ela está dentro de um link ou botão? Então descreva para onde o link leva ou o que o botão faz.
Ela acrescenta significado? Dê às fotos simples uma descrição breve e, para gráficos, coloque os dados em outro lugar da página. É só decoração? Use um alt vazio.

Texto alternativo para lojas virtuais

Compradores que usam leitores de tela dependem do texto alternativo das imagens de produto como outras pessoas dependem do zoom. Quando um produto tem várias fotos, faça cada alt diferente: vista frontal, detalhe do bolso traseiro, vestida por um modelo de 170 cm de altura.

Mais exemplos para lojas e sites de empresas

Exemplos de texto alternativo para imagens comuns de empresas

Onde a imagem está
Exemplo de texto alternativo
Por quê

Foto de destaque do interior de um café
Balcão de café ensolarado com doces frescos à mostra
Ambienta a cena em poucas palavras

Foto de rosto na página Sobre
Dra. Amira Khan, dentista responsável
Nome e função, não a cor do cabelo

Ícone social com link para o Instagram
Harbour Bakery no Instagram
Descreve o destino do link

Captura de tela de mapa com o seu endereço ao lado
(vazio: alt="")
O endereço já está em texto por perto

Foto de antes e depois de um telhado consertado
Telhado antes do conserto, com telhas faltando na cumeeira
Diz o que muda entre as fotos

Selo de certificação
Certificado pelo conselho regional do setor
Diz o que o selo certifica

Exemplos de código

Três casos comuns em HTML

Um logo com link, uma foto de produto e uma imagem decorativa. Repare que a decorativa ainda tem o atributo alt, só que vazio.

Um gráfico com os dados em texto

O alt nomeia o gráfico e aponta para os detalhes, que ficam em uma legenda que todo visitante pode ler.

Prática: escolha o melhor texto alternativo

{n} de {v} respondidas corretamente.

Certo.

Não exatamente. A melhor resposta é: {v}.

Recomeçar

Opções de texto alternativo

Seu logo fica no cabeçalho e leva à página inicial. O nome da sua empresa não aparece escrito em nenhum outro lugar do cabeçalho.

Página inicial da Harbour Bakery
Nosso lindo logo em azul

Uma imagem com link precisa de um texto alternativo que diga para onde o link leva.

Uma linha ondulada fina separa duas seções. Ela não acrescenta nenhuma informação.

linha ondulada
imagem divisória
Um alt vazio (alt="")

Imagens puramente decorativas recebem um alt vazio para que os leitores de tela as ignorem.

A foto principal na página de produto de uma caneca que vem em três cores. Esta é a verde-sálvia.

Caneca de cerâmica verde-sálvia com alça curva
caneca caneca caneca de café melhor caneca presente
foto do produto

Uma descrição breve com os detalhes que diferenciam essa variação. Listas de palavras-chave são spam.

Um botão que só tem um ícone de carrinho abre o carrinho de compras.

Ícone de carrinho de supermercado
Ver carrinho

Para uma imagem dentro de um botão, descreva a ação, não o desenho.

Uma imagem de banner com as palavras Frete grátis neste fim de semana. As mesmas palavras não estão na página como texto.

Exemplos de texto alternativo: o que escrever para cada tipo de imagem