Texto alternativo e descrição

Nível: iniciante

Esses são dois recursos muito simples e ao mesmo tempo muito importantes para a usabilidade de seu site. Estamos falando dos atributos alt e title, tantas vezes esquecidos por webmasters e blogueiros.

Texto alternativo em imagens

Como o próprio nome sugere, o texto alternativo (atributo alt) é exibido no lugar da imagem quando a mesma não pode ser carregada. Nesse atributo coloque a palavra que resume a imagem. Quando essa imagem apontar para um outro site, coloque o nome do site no campo alt.

Abaixo segue um exemplo de utilização desse recurso. À esquerda aparece a imagem que desejo exibir. À direita simulei um erro de carregamento de imagem. Como ela não abriu, aparece o texto que coloquei no campo alt:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho'>

Neste outro exemplo, a minha imagem é um link, então vou facilitar a vida do leitor colocando no campo alt o nome do site, porque é isso que eu quero que ele veja se a imagem não carregar.

<a target='_blank' href='http://pink.helenfernanda.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Helen Fernanda Pink'></a>

Descrição em imagens

A descrição é feita com o atributo title. O texto da descrição aparece quando você passa o mouse sobre a imagem.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho' title='Gatinho'>

Navegadores

Quando a imagem não tem o atributo title, o Internet Explorer (e somente ele) exibe o texto que está no campo alt quando o cursor está sobre a imagem, mesmo que ela tenha sido carregada normalmente.

Descrição em links

Helen Fernanda Pink

<a target='_blank' href='http://pink.helenfernanda.com' title='Meu site cor-de-rosa com assuntos de mulherzinha'>Helen Fernanda Pink</a>

Quando a imagem for um link, coloque alt na tag <img> e title na tag <a>:

<a target='_blank' href='http://pink.helenfernanda.com' title='Helen Fernanda Pink'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Helen Fernanda Pink'></a>

Descrição em texto

Em HTML as tags que precisam de descrição são <abbr> (abreviatura) e <acronym> (sigla):

Pe. Inácio - Cel. Cardoso HTML - CSS

<abbr title="Padre">Pe.</abbr> Inácio - <abbr title="Coronel">Cel.</abbr> Cardoso - <acronym title="HyperText Markup Language">HTML</acronym> - <acronym title='Cascading Style Sheets'>CSS</acronym>

Porém, title é um atributo que pode ser utilizado na maioria das tags:

White House Goóc - Nanda

<h4 title="Casa Branca">White House</h4> - <i title="Marca de calçados feitos de pneu reciclado">Goóc</i> - <b title="Meu principal apelido">Nanda</b>

Na folha de estilos

Nível: intermediário

Para que o leitor saiba que tal palavra ou expressão tem uma descrição, é recomendado que você crie uma identificação na folha de estilos. Vou dar um exemplo, observe o código:

#temdes {cursor:crosshair; border-bottom:1px dashed #cccccc;}
]]></b:skin>

Neste exemplo, sempre que eu colocar title em um texto vou usar id='temdes' para que o mesmo apareça diferenciado, com o cursor em forma de cruz e um sublinhado riscado cinza. Assim, o leitor que estiver habituado ao meu blog, saberá sempre que um texto tiver descrição.

<span id='temdes' title='Filme nacional'>Meu Tio Matou um Cara</span>	Meu Tio Matou um Cara
<i id='temdes' title='Meu blog pessoal'>Helen Fernanda Ponto Com</i>	Helen Fernanda Ponto Com

Faça bom uso!

Imagem do site Bubbaloo Brigadeiro