El atributo alt dentro de un La etiqueta proporciona contenido alternativo para los usuarios que no pueden descargar imágenes o que tienen las imágenes desactivadas por completo. Utilizamos este atributo todo el tiempo para hacer que nuestro contenido sea más accesible, pero ¿alguna vez has considerado cómo se ve realmente??
Vamos a utilizar la plantilla de correo electrónico que creamos en un tutorial anterior como ejemplo, pero los principios se aplican también al diseño web basado en navegador..
Si echamos un vistazo a nuestro archivo con las imágenes desactivadas, así es como se ve:
Claramente, el texto ALT no es atractivo, especialmente los enlaces. Podemos hacer algunas cosas para animarlo..
Para el encabezado principal, vamos a hacer el texto mucho más grande y cambiarlo a azul oscuro en lugar de negro. Hacemos esto agregando estilos al elemento padre (en este caso, una celda). Estos estilos se aplicarán a las etiquetas alt dentro de esa celda.
Esta es nuestra celda:
Agregaremos un poco de estilo de texto para que se vea así:
Y diseñaremos nuestros enlaces de redes sociales para que se vuelvan blancos:
¡Simple como eso! Ahora podemos estar seguros de que nuestro correo electrónico se mostrará bien, incluso con las imágenes desactivadas.