Spanish (Español) translation by Yair Rodriguez (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.
<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:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
Vamos a agregar un poco de estilos al texto para que se vea así:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
Y agregaremos estilos a nuestros enlaces de redes sociales para que se conviertan en color blanco:
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> <a href="http://www.twitter.com/" style="color: #ffffff;"> <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> </a> </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> <a href="http://www.twitter.com/" style="color: #ffffff;"> <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> </a> </td> </tr> </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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post