() translation by (you can also view the original English article)
O atributo alt junto com a tag <img> disponibiliza um conteúdo alternativo para usuários que não possam baixar a imagem. Utilizamos esse atributo para fazer com que nosso conteúdo fique mais acessível, mas você já parou para pensar no que realmente ele representa?
Vamos utilizar o template para email que criamos em outro tutorial como exemplo, mas os princípios são aplicáveis a qualquer projeto web.
1 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
Se você der uma olhada no nosso arquivo sem as imagens, ele vai se parecer com o exemplo abaixo:
Fica claro que o ALT Text não tem destaque - especialmente os links. Podemos fazer alguns procedimentos para melhorar a apresentação dessa informação.
Para o texto principal, vamos deixar o texto mais largo e vamos mudar sua cor para dark blue (azul escuro) ao invés de preto. Podemos fazer isso adicionando estilos ao elemento pai (neste caso, a célula da tabela). Os estilos declarados então serão aplicados ao texto disponibilizado pelo atributo ALT, na célula.
Essa é a célula:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
Vamos adicionar alguns estilos de texto, conforme o exemplo abaixo:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
E vamos aplicar estilos nos links social media, para que eles fiquem brancos:
1 |
<table border="0" cellpadding="0" cellspacing="0"> |
2 |
<tr>
|
3 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
4 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
5 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
6 |
</a>
|
7 |
</td>
|
8 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
9 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
10 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
11 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
12 |
</a>
|
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
Simples assim! Agora podemos ter certeza de que a mensagem do email está explicita mesmo que as imagens não sejam carregadas.
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
