23

Estudando sobre HTML5 me deparei com a propriedade alt sendo usada na tag <img />.

Exemplo:

<img src="https://s-media-cache-ak0.pinimg.com/736x/9e/fd/27/9efd27afef4e8127923fbce92b8c967d--minions-minions-funny-minion.jpg" alt='Essa é uma imagem sobre Minions' />

Gostaria de saber qual a finalidade de alt em uma tag <img />, visto que, nada visual é apresentado.

12
  • Marconi, quebra o link e vera o que aparece no lugar ;)
    – David
    Commented 11/11/2016 às 10:35
  • Use 2 são alt e title, caso novos navegadores para mac, android e outros, quebrar link e se esta dizendo encurtar? entre goo.gl ou imgur.com
    – KingRider
    Commented 11/11/2016 às 10:52
  • É mesmo pessoal bem melhor, valeu :)
    – Marconi
    Commented 11/11/2016 às 10:58
  • 1
    Aqui tem um exemplo Marconi: jsfiddle.net/jmo802c9
    – Miguel
    Commented 11/11/2016 às 11:02
  • 1
    alt é alternativo, o foco principal é servir de fallback para acaso a imagem não carregue, todavia os buscadores usam para descrever o conteudo, semelhante ao title. Portanto não precisa de title dentro de img, basta usar alt=
    – Syzoth
    Commented 11/11/2016 às 13:43

2 Respostas 2

28

É 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:

Meme com um Fiat 147 todo detonado andando pelas ruas e frase "funcionar é diferente de star certo"

Se o navegador não mostra tooltip veja o fonte deste texto com a descrição dela.

Coloquei no GitHub para referência futura.

0
8

Na minha opinião, a grande importância do alt é na acessibilidade, inclusive a W3C (World Wide Web Consortium) possui esse slide sobre acessibilidade na web.

Existem alguns leitores de tela como o ORCA, para Linux e JAMS para Windows, nesse site tem uma explicação sobre eles. Com a tag alt esses softwares informam para os usuários deficientes o que está na imagem. É por isso, que a função principal da tag é fornecer uma descrição alternativa para a imagem.

Caso tenha interesse em saber mais sobre acessibilidade na web, recomendo a leitura da cartilha da W3C.

Lembre-se que pequenos detalhes, como <img src="https://goo.gl/3pS3AU" alt='Essa é uma imagem sobre Minions' />, no seu HTML fazem grande diferença para usuários deficientes.

3
  • 1
    Concordo com você.
    – Marconi
    Commented 11/11/2016 às 11:48
  • 1
    Vou dedicar um tempo nesse PDF em. :)
    – Marconi
    Commented 11/11/2016 às 12:06
  • 1
    @Marconi, vale a pena =) Commented 11/11/2016 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .