W3docs
pt
Entrar

Atributo alt do HTML

O atributo alt especifica um texto alternativo exibido quando o elemento não pode ser renderizado. Veja exemplos deste atributo em diferentes elementos.

O atributo HTML alt fornece um texto alternativo para uma imagem (ou elemento semelhante a uma imagem). Ele é lido em voz alta por leitores de tela e é exibido no lugar da imagem quando ela falha ao carregar. Esta página explica como deve ser um bom texto alternativo, como o alt se comporta em cada elemento que o suporta e os erros comuns a evitar.

Você pode usar o atributo alt nos seguintes elementos: <area>, <img> e <input type="image">.

Por que o texto alt é importante

O atributo alt desempenha três funções ao mesmo tempo:

  • Acessibilidade. Usuários de leitores de tela não conseguem ver a imagem, então o texto alt é a imagem para eles. Descrever o conteúdo permite que eles acompanhem a página. Um alt significativo é o que torna uma imagem acessível.
  • Substituto para imagem quebrada. Se o arquivo de imagem estiver ausente, o caminho estiver errado ou a conexão for lenta, o navegador exibe o texto alt no lugar da imagem, em vez de uma caixa vazia. Isso mantém a página utilizável.
  • SEO (um bônus menor). Os mecanismos de busca podem ler o texto alt para entender o que uma imagem mostra, o que ajuda na pesquisa de imagens. Trate isso como um pequeno benefício secundário — escreva o alt para pessoas, não para inserção de palavras-chave.
Perigo

Para o elemento <img>, o atributo alt é obrigatório. Omiti-lo completamente é uma violação de acessibilidade: um leitor de tela recorrerá ao anúncio do nome do arquivo, o que raramente é útil. Um alt="" vazio é uma escolha deliberada e válida para imagens decorativas — não é o mesmo que omitir o alt.

Como escrever um bom texto alt

Procure descrever a imagem da forma como você a descreveria a alguém que não consegue vê-la, dentro do contexto do conteúdo ao redor.

  • Seja descritivo e específico, mas conciso — aproximadamente 125 caracteres ou menos. Leitores de tela podem não fazer pausas adequadas em textos alternativos muito longos.
  • Não comece com "imagem de" ou "foto de". Os leitores de tela já anunciam que se trata de uma imagem, então o prefixo é redundante.
  • Transmita a função ou o conteúdo relevante no contexto, não cada detalhe visual.
  • Omita o texto alt para imagens puramente decorativas usando alt="" (veja abaixo).

Texto alt bom vs. ruim

Para a mesma foto de um golden retriever pegando um frisbee em um parque:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Imagens decorativas: use um alt vazio

Se uma imagem não acrescenta nenhuma informação — um divisor, um elemento decorativo de fundo, um ícone ao lado de um texto que já diz a mesma coisa — dê a ela um alt="" vazio. Isso instrui os leitores de tela a ignorar a imagem completamente, em vez de anunciar um nome de arquivo.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Informação

Lembre-se da distinção: alt="" = "esta imagem é decorativa, ignore-a." Nenhum alt = um erro que deixa os usuários de leitores de tela sem nenhuma alternativa.

Sintaxe

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

O atributo alt em <area>

Em um mapa de imagem, cada <area> clicável funciona como um link, então seu alt deve descrever para onde aquela área leva — da mesma forma que você escreveria o texto de um link. Cada <area> precisa do seu próprio alt distinto; reutilizar o mesmo valor para destinos diferentes impede que os usuários diferenciem as regiões.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Experimente Você Mesmo »

O atributo alt em <img>

Este é o uso mais comum. Descreva o que a imagem mostra no contexto da página. Se a imagem também tiver uma legenda visível, considere envolvê-la em <figure> com um <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Experimente Você Mesmo »

O atributo alt em <input type="image">

Um <input type="image"> é um botão de envio gráfico. Aqui o alt deve descrever a ação do botão, não a imagem — por exemplo, alt="Submit" ou alt="Search" — porque é isso que o usuário precisa saber quando a imagem não carrega. O atributo alt só é válido em <input> quando type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Experimente Você Mesmo »

Prática

Prática
Qual é a finalidade do atributo 'alt' no HTML?
Qual é a finalidade do atributo 'alt' no HTML?

Tópicos relacionados

Was this page helpful?