() translation by (you can also view the original English article)
El atributo alt dentro de la etiqueta <img> provee una alternativa de contenido para los usuarios que no pueden descargar imágenes, o que tienen desactivada la descarga de imágenes. Utilizamos este atributo todo el tiempo para hacer nuestro contenido más accesible, pero ¿alguna vez has pensado cómo se muestra realmente?
Vamos a usar la plantilla de correo que construimos en el tutorial anterior como ejemplo, pero los principios son bien aplicados al diseño web basado en el navegador.
1 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
Si echamos un vistazo a nuestro archivo con la descarga de imágenes deshabilitada, así es como se visualizaría:
Es evidente que el texto ALT no es nada atractivo —especialmente los enlaces. Podemos hacer unas cuantas cosas para mejorarlo.
Para el encabezado principal, vamos a hacer el texto mucho más largo y cambiarlo a un color azul oscuro en lugar de blanco. Hacemos esto agregando los estilos al elemento padre (en este caso una celda). Estos estilos se aplicarán después a las etiquetas alt dentro de esa celda.
Esta es nuestra celda:
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 a agregar un poco de estilos al texto para que se vea así:
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>
|
Y agregaremos estilos a nuestros enlaces de redes sociales para que se conviertan en color blanco:
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>
|
¡Tan simple como eso! Ahora podemos estar seguros que nuestro correo se mostrará bien, incluso cuando las imágenes estén desactivadas.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
