Texto alternativo para imagens HTML

Para que serve o texto alternativo?

O texto alternativo serve para descrever a imagem inserida no documento. Utilizamos o atributo alt para adicionar um texto alternativo à imagem.

Exemplo:

<img src="dino.jpg" alt="Tiranossauro Rex">

Quando a imagem é carregada corretamente, o texto alternativo é omitido e não vemos qualquer alteração. Veremos mais sobre o atributo alt nos textos a seguir.

Por que devo usar o atributo alt?

O atributo alt é importante por diversas razões:

• Facilitar a interpretação da página pelos buscadores, ajuda no SEO.
• Facilitar o entendimento da página para pessoas com deficiência visual.
• Informar a descrição da imagem caso o navegador não suporte o tipo de imagem.
• Informar a descrição da imagem em navegadores somente texto, como Lynx.
• Informar a descrição da imagem caso a pessoa desabilite as imagens do navegador.

Quando o carregamento da imagem dá erro

Quando o carregamento da imagem dá erro, o navegador exibe o texto alternativo no lugar da imagem. Isso garante que o usuário ainda tenha uma ideia do que a imagem representaria.

Exemplo:

<img src="imagem-quebrada.png" alt="Logo do site">

O resultado é que, caso a imagem "imagem-quebrada.png" não seja carregada, o texto "Logo do site" que foi especificado no atributo alt será exibido no lugar da imagem.