Añadir texto alternativo a las imágenes

Sabemos lo importante que es el diseño de tus correos electrónicos y el papel decisivo que juegan las imágenes. Sin embargo, en algunos casos es posible que un suscriptor no vea las imágenes de un correo electrónico. Para eso está el texto alternativo.

En este artículo, descubrirás el texto alternativo para imágenes y cómo añadirlo a tus correos electrónicos para que todos los suscriptores disfruten de una experiencia fluida.

Acerca del texto alternativo

Alt text, o texto alternativo, es una descripción corta de una imagen en tu correo electrónico que se muestra cuando los suscriptores no son capaces de verla. Esto sucede cuando tienen desactivadas las imágenes en su cliente de correo electrónico o utilizan un lector de pantalla.

El texto alternativo ayuda a tus suscriptores a comprender qué valor añade una imagen a tu mensaje o les permite saber que una imagen es decorativa y se puede ignorar. Puede parecer algo menor, pero el texto alternativo puede ser muy importante si los suscriptores no pueden ver tus imágenes, así que inclúyelo para cada imagen de tu correo electrónico.

Texto alternativo y accesibilidad

El texto alternativo es especialmente importante para las personas que utilizan lectores de pantalla, por lo que se considera una práctica recomendada básica para facilitar la accesibilidad al correo electrónico.

Sin texto alternativo, un lector de pantalla le dirá a tu suscriptor que hay una imagen, pero el suscriptor no tiene forma de saber qué información proporciona la imagen. Para obtener más información sobre prácticas recomendadas en accesibilidad, consulta Accesibilidad en marketing por correo electrónico.

Texto alternativo y visualización de imágenes

Si las imágenes no se muestran en la bandeja de entrada de tus suscriptores, es posible que su cliente de correo electrónico las esté bloqueando. Por razones de seguridad, muchos clientes las desactivan de manera predeterminada, por lo que los suscriptores tienen que activar manualmente la visualización de imágenes para poder verlas. Si tus suscriptores tienen bloqueadas las imágenes, verán tu texto alternativo en su lugar.

Este es un ejemplo de cómo se muestra un texto alternativo cuando las imágenes están bloqueadas.

Esta imagen no tiene texto alternativo.

Esta imagen sí lo incluye.

Consejos para un texto alternativo efectivo

A continuación te ofrecemos algunos consejos que te ayudarán a escribir un texto alternativo apropiado y efectivo.

• Keep it short (Que sea breve)
  El texto alternativo debe ser fácil de leer y comprender para que tus suscriptores continúen con el resto del mensaje. Procura que no sea más de una o dos frases.
• Utiliza la puntuación correcta
  Como los lectores de pantalla utilizan la puntuación para saber dónde hacer una pausa al leer el contenido, es importante emplear la puntuación adecuada en el texto alternativo.
• No emplees comillas
  El atributo alt que se agrega al código HTML sin procesar utiliza comillas para identificar dónde comienza y dónde termina el texto alternativo del correo electrónico. Si se introducen más comillas, se romperá el HTML.
• Repite el texto que aparece en las imágenes
  Siempre es mejor mantener la información importante en el texto principal de un mensaje que en una imagen. Sin embargo, si una imagen incluye texto, repite esa información en el texto alternativo para que tus suscriptores no se la pierdan.
• No repitas el mismo pie de imagen
  Los pies de imagen son leídos por los lectores de pantalla y se muestran incluso cuando las imágenes están bloqueadas. Por eso no es conveniente repetirlos en el texto alternativo. El texto alternativo debe proporcionar información sobre la imagen que el suscriptor no pueda obtener exclusivamente del pie de foto.
• Ten en cuenta el contexto
  El contexto es lo más importante cuando se trata de escribir el texto alternativo de una imagen. ¿Qué relación hay entre la imagen y el contenido que la rodea? Pregúntate qué información podrían tener ya tus suscriptores sobre la imagen basándote en el contenido que la rodea.
• Identifica las imágenes decorativas
  Si una imagen es meramente decorativa, indícalo brevemente en el texto alternativo para que tus suscriptores pasen directamente al resto del mensaje. Por ejemplo, con que escribas "Imagen decorativa" es suficiente.
• Prueba tu contenido
  Algunos clientes de correo electrónico no muestran texto alternativo de las imágenes vinculadas, o no muestran texto alternativo que exceda el ancho de la imagen. Envía correos electrónicos de prueba a diferentes clientes de correo electrónico y desactiva las imágenes para averiguar cómo se mostrará el texto alternativo.
  Vista previa y probar el correo electrónico

Añadir texto alternativo a las imágenes

En Mailchimp hay varias maneras de añadir texto alternativo a las imágenes. El método utilizado depende de la ubicación de la imagen.

• Desde un bloque de imagen
• Desde un bloque de texto
• En plantillas con código personalizado

Desde un bloque de imagen

Para añadir un texto alternativo a una imagen de cualquier bloque de contenido, como imagen, grupo de imágenes, tarjeta de imagen o imagen + subtítulo, sigue los siguientes pasos.

1. En la sección Contenido de la lista de verificación de correo electrónico, haz clic en Editar diseño.
   
2. En el paso Design (Diseñar), haz clic en el bloque de imagen con el que deseas trabajar.
3. En el panel de edición, haz clic en Alt (Alternativo).
   
4. En el campo Image Alt-Text (Texto alternativo de la imagen), introduce el texto alternativo de la imagen.
5. Haz clic en Update (Actualizar).
   
6. Haz clic en Save & Close (Guardar y cerrar).

¡Ya está! Ahora tus suscriptores no se perderán ninguno de tus contenidos, aunque no vean las imágenes.

Desde un bloque de texto

Para añadir texto alternativo a una imagen de un bloque de contenido Texto, sigue estos pasos.

1. En la sección Contenido de la lista de verificación de correo electrónico, haz clic en Editar diseño.
   
2. En el paso Design (Diseñar), haz clic en el bloque de texto que contiene la imagen con la que deseas trabajar.
3. Haz doble clic en la imagen para abrir el Gestor de contenido.
   
4. Haz clic en show image style options (mostrar opciones de estilo para imágenes).
   
5. En el campo Alt Text (Texto alternativo), introduce el texto alternativo de la imagen.
6. Haz clic en Save & Insert Image (Guardar e insertar imagen).
   
7. Haz clic en Save & Close (Guardar y cerrar).

¡Bien hecho! Ahora, cuando tus suscriptores no puedan ver las imágenes, no se perderán ninguno de tus contenidos.

En plantillas con código personalizado

Si escribes el código de tus propias plantillas, tendrás que incluir un atributo alt para cada imagen que utilices. Inserta el atributo alt dentro de la etiqueta image e introduce el texto alternativo.

El código debería verse de la siguiente forma.

<img alt="Woman holding a small clay pot stamped with the Potted Planter logo." align="none" height="400" src="https://gallery.mailchimp.com/example.jpg" style="width: 600px; height: 400px; margin: 0px;" width="600" />