É para colocar a descrição do que a imagem contém. Ela será mostrada no lugar da imagem se ela não puder ser exibida. Útil para:
- facilitar a indexação do conteúdo, então serve para SEO,
- mostrar alguma coisa informativa se o navegador não carregar a imagem por algum motivo ou estiver lento,
- poder informar alguma coisa para quem tem deficiência visual.
O último é importante porque os softwares de leituras para quem tem dificuldade visual pode ler o que está escrito e "falar" para a pessoa. Não tem como (ainda) "contar" para a pessoa o que é a imagem, só dá para fazer isso com uma descrição.
Muita gente acha que tudo sempre funcionará, mas tem várias razões para a imagem não ser exibida:
- tem navegador que não pode mostrar a imagem, ele é textual,
- o navegador pode ser configurado para não mostrar imagens,
- tem rede que pode ter bloqueio do local onde tem a imagem,
- a imagem pode deixar de existir onde estava e você não perceber,
- pode haver diversos erros no meio do processo.
Não use o espaço para colocar o nome da imagem ou algo pouco útil. O texto deve descrever a imagem o melhor possível para atender esses requisitos ditos acima. Se for necessário pode colocar um texto longo, mas nem sempre isso é necessário, não é preciso fazer uma crítica artística da imagem :). Se houver conflito entre os objetivos, faça o melhor possível para atender o mais importante e tente ajudar nos demais.
Não precisa usar se a imagem for meramente decorativa, use <alt = "">
nesses casos, só imagens importantes para o contexto geral da página é que precisam disso. Não deixe de usar essa forma para que o navegador não mostre algo, para que não tente descrever que tem uma imagem ali, que na verdade só seria útil para a página renderizada por completo.
O exemplo adequado é o que está na pergunta mesmo :) não tem muito segredo.
Documentação na MDN.
Aqui no site permite fazer isso quando adiciona imagem e poucos o fazem, isso é ruim e pouco inclusivo.
Exemplo:
Se o navegador não mostra tooltip veja o fonte deste texto com a descrição dela.
Coloquei no GitHub para referência futura.
alt
etitle
, caso novos navegadores para mac, android e outros, quebrar link e se esta dizendo encurtar? entre goo.gl ou imgur.comalt
é alternativo, o foco principal é servir de fallback para acaso a imagem não carregue, todavia os buscadores usam para descrever o conteudo, semelhante aotitle
. Portanto não precisa detitle
dentro deimg
, basta usaralt=