7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. HTML

Consejo rápido: recuerda agregar diseño al texto del atributo ALT

Scroll to top
Read Time: 2 mins
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

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.

Si echamos un vistazo a nuestro archivo con la descarga de imágenes deshabilitada, así es como se visualizaría:

altTagsBeforealtTagsBeforealtTagsBefore

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:

Vamos a agregar un poco de estilos al texto para que se vea así:

Y agregaremos estilos a nuestros enlaces de redes sociales para que se conviertan en color blanco:

altTagsAfteraltTagsAfteraltTagsAfter

¡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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
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.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.