<img title vs alt | Como usar corretamente o atributo alt

formulário de inserção de imagem do wordpress

Inserir imagem em post do wordpress

Estava eu aqui escrevendo um post no blog e ao inserir uma imagem o wordpress, assim como outros CMS, me pediu um título e um texto alternativo para a imagem. No caso o título será preenchido no atributo title e texto alternativo no atributo alt. Como quero deixar o blog o mais correto e “search engine friendly” possível fui pesquisar qual a diferença entre title e alt em uma tag do html.

Eu já tinha lido sobre o assunto e sabia que uma delas era para descrever a imagem para pessoas com deficiência visual, mas não tinha certeza qual e se realmente era isso. Por isso pesquisei e respondo aqui. Na verdade a coisa é um pouco mais complexa como explico abaixo:

Confesso que nos meus tempos de Joomla sempre preenchi o mesmo valor para ambos. Acho até que alguns editores html wysiwyg (what you see is what you get), ou seja, editores visuais, já preenchiam automaticamente title e alt iguais. Isso obviamente quando não se tinha tanta preocupação com web standards como se tem hoje.


Na verdade os dois atributos são bem diferentes.


Uma imagem sem o atributo alt

Uma imagem sem o atributo alt

O atributo title deve fornecer uma informação adicional e seguir as regras de um titulo comum: ser relevante, curto, de facil memorização e conciso. O título “Download do Linux Mint Debian Edition” é exibido na maioria dos browsers como uma “tooltip” quando você passa o mouse sobre a imagem.

Já o atributo alt serve para ser uma informação alternativa ou substituta que é renderizado quando o elemento html, ao qual é aplicado, não é renderizado. Isto pode ocorrer tanto para pessoas que escolheram desabilitar as imagens no seu browser ou para outros “user agents” ou navegadores que simplesmente não podem ver as imagens. Um exemplo é um “leitor de tela” ou “screen reader”, um software que lê o conteúdo de uma página web para pessoas com deficiência visual.

Imagem com atributo alt

Imagem com atributo alt

Equívocos Comuns

O atributo alt nem sempre tem que descrever literalmente os conteúdos de uma imagem. Tenha em mente o que deve ser útil para uma pessoa que não pode ver a imagem. O atributo alt deve ser uma alternativa à imagem, normalmente exprimindo seu propósito. Por exemplo, uma imagem de um sinal de alerta não deveria ter como texto alternativo “um triângulo com fundo amarelo, bordas pretas e um ponto de exclamação no centro”, mas simplesmente “Alerta!”.

O Internet Explorer 7 (sempre o ie) e browsers mais antigos renderizavam o atributo alt como uma tooltip o que levou muitos desenvolvedores web usarem o alt quando queriam exibir tooltips contendo informações adicionais a imagem (por isso o meu erro em preencher sempre o alt e o title com a mesma informação). O Internet Explorer 8 corrigiu este erro.

O atributo alt é frequentemente chamado incorretamente de “alt tag”.

Imagem com atributo title

Imagem com atributo title

Sobre o autor

Um desenvolvedor web veterano que está sempre a procura de novas tecnologias que facilitem o desenvolvimento de aplicativos ricos para a internet. Louco por tecnologia, games e Linux.

Deixe uma resposta