La «etiqueta alt» no existe como tal. Alt es un atributo de la etiqueta <img>: contiene el texto alternativo de la imagen, que se muestra cuando esta no carga, que los lectores de pantalla leen en voz alta y que los buscadores aprovechan para entender lo que se ve. La sintaxis y las reglas de redacción valen para cualquier soporte. Las newsletters añaden 2 dificultades: imágenes que algunos clientes de correo bloquean y botones en forma de imagen que desaparecen con ellas.
Sintaxis del atributo alt
El atributo alt va dentro de la etiqueta <img>, junto a src, que indica la dirección del archivo:
<img src="logo-captain-verify.png" alt="Captain Verify" width="200" height="60">
Indica también width y height (aquí 200 x 60 px): estas dimensiones reservan el espacio de la imagen. Cuando el cliente de correo bloquea el archivo, el texto alternativo aparece en esa zona. El atributo title muestra un tooltip al pasar el ratón y nunca sustituye a alt.
Escribir un texto alternativo útil
Describe la función de la imagen en su contexto. Una misma foto de un teléfono pide 2 alt distintos según ilustre una prueba de producto o lleve a una ficha de compra. Hazte esta pregunta: si la imagen desapareciera, ¿qué habría que leer en su lugar?
Apunta a una frase corta. Abondance da como referencia menos de 125 caracteres en su guía sobre la etiqueta alt (en francés). Ese límite procede de la práctica de los editores: WCAG 2.2 no fija ninguno. Para un botón, Mailjet recomienda unos 25 caracteres sobre 200 px de ancho, en sus consejos sobre el alt text (en francés).
Elimina las fórmulas «imagen de» y «foto de»: los lectores de pantalla ya anuncian que se trata de una imagen. Para un logo, escribe el nombre de la marca. Para un botón «Descargar la guía», el alt «Descargar la guía» basta: «botón azul» no dice nada al suscriptor que no ve la imagen. Léelo en voz alta.
¿Qué alt para cada tipo de imagen?
Todo depende del papel de la imagen en el mensaje: aportar información o solo decorar. El árbol de decisión del W3C distingue 5 casos, de la imagen decorativa a la imagen compleja. Para una newsletter, bastan 4 preguntas, en este orden:
- ¿La imagen está dentro de un enlace o un botón? El alt describe el destino o la acción.
- ¿La imagen contiene texto? El alt lo reproduce palabra por palabra, salvo que ya aparezca justo al lado.
- ¿La imagen aporta información (oferta, producto, gráfico)? El alt da lo esencial. Los datos detallados van como texto en el correo.
- ¿La imagen es puramente decorativa o repite el texto contiguo? El alt queda vacío.
| Tipo de imagen | Alt recomendado | Motivo |
|---|---|---|
| Logo de la cabecera | Captain Verify | El nombre identifica al remitente |
| Botón en forma de imagen | Descargar la guía | El alt describe la acción esperada |
| Banner con texto | Oferta de temporada: envío gratis desde 50 € de compra | Se reproduce íntegro el texto de la imagen |
| Gráfico | Aperturas al alza de enero a junio, detalle en la tabla de abajo | El mensaje clave en el alt y las cifras en texto |
| Línea o separador | alt=»» | No hay información que transmitir |
Alt vacío e imágenes decorativas
Una imagen decorativa lleva alt="": el atributo está presente pero sin texto, y las tecnologías de asistencia lo ignoran. Omitir el atributo produce el efecto contrario: algunos lectores de pantalla anuncian entonces el nombre del archivo, lo que ensucia la lectura.
El W3C (WAI) recurre al alt vacío cuando la imagen es un simple efecto visual o repite el texto contiguo. Cita los espaciadores entre las imágenes decorativas. En un correo, es preferible un espaciado en CSS (el padding de una celda de tabla): así no hay nada que ignorar.
Normas: WCAG 1.1.1 y RGAA 1.1 y 1.2
El criterio 1.1.1 «Contenido no textual» de WCAG 2.2 es de nivel A, el más básico: todo contenido no textual tiene una alternativa textual que cumple una función equivalente. La pura decoración es una excepción, siempre que las tecnologías de asistencia puedan ignorarla. El RGAA 4.1.2 de la DINUM (referencial francés, en francés) recoge este principio en 2 criterios del tema Imágenes: el 1.1 «¿Cada imagen que aporta información tiene una alternativa textual?» y el 1.2 «¿Cada imagen decorativa se ignora correctamente por las tecnologías de asistencia?». La versión 5 del referencial está anunciada para finales de 2026.
Para profundizar en el correo electrónico, consulta nuestro artículo sobre las técnicas de codificación de correos accesibles y el dedicado a la accesibilidad de los correos.
SEO y Google Imágenes
Abondance cuenta la indexación de las imágenes entre las razones para escribir un alt cuidado y se apoya en Google Search Central, la especificación WHATWG y MDN. Ninguna fuente consultada cifra una mejora de posición atribuible al atributo: rellenar de palabras clave no aporta nada y estropea la lectura con lector de pantalla. En una newsletter el efecto SEO es insignificante, porque el mensaje no es una página indexada, salvo que lo publiques en versión web. En un sitio, nombra también el archivo con 2 a 4 palabras separadas por guiones, por ejemplo logo-captain-verify.png, como aconseja Abondance.
Errores frecuentes
- Omitir el atributo en una imagen decorativa en lugar de escribir
alt="". - Empezar por «imagen de» o «foto de».
- Encadenar palabras clave (keyword stuffing) en vez de describir la función de la imagen.
- Copiar el mismo alt en todas las imágenes de un correo.
- Dejar el texto importante solo dentro de la imagen, sin equivalente en HTML.
- Escribir un alt más largo que la zona de la imagen: si se bloquea, puede cortarse.
Texto alt en newsletters: imágenes bloqueadas
Un sitio web muestra casi siempre sus imágenes. Un correo depende del cliente de cada suscriptor. Ahí es donde el alt se convierte en una red de seguridad.
En su guía sobre el bloqueo de imágenes (publicada en 2017 y actualizada el 17 de agosto de 2021), Litmus señala a los clientes Outlook de escritorio como los principales bloqueadores. La mayoría de los demás clientes muestran las imágenes por defecto, con AOL como excepción. Los clientes móviles probados por Litmus también las muestran: el suscriptor tiene que rebuscar en los ajustes para desactivarlas. El bloqueo afecta, por tanto, sobre todo a los equipos de sobremesa con Outlook. Microsoft configura Outlook por defecto para bloquear la descarga automática de imágenes. Gmail las carga automáticamente según la ayuda de Google (opción Mostrar siempre las imágenes externas), salvo si el mensaje o el remitente parecen sospechosos o si el usuario ha pedido una confirmación previa.
El peso de estos suscriptores depende de tu público. Litmus cita Email Client Market Share: Outlook ocupa el 4.º puesto entre los clientes de correo con un 6 % de las aperturas. Litmus añade que esa cifra puede estar subestimada, porque Outlook bloquea por defecto el píxel de seguimiento y esas aperturas no se cuentan. Una base B2B tiene buenas probabilidades de incluir más, según Litmus.
La captura muestra el fallo típico: a la izquierda, solo la imagen de la cabecera muestra un texto alternativo, minúsculo. Las imágenes de los bloques de abajo quedan vacías. Litmus precisa que en Outlook de escritorio el alt solo aparece tras el banner de aviso y únicamente si las imágenes están desactivadas. Una imagen rota no muestra nada.
Alt con estilo: ¿qué clientes lo muestran?
Gmail, Outlook.com y Apple Mail muestran el alt con estilo; Outlook de escritorio 2007-2019 no. Yahoo! Mail en webmail no muestra ningún alt, según la tabla de Litmus (actualizada en 2021). El alt se da formato con un estilo en línea en la etiqueta <img>, por ejemplo el color y el tamaño del texto.
<img src="boton.png" alt="Descargar la guía" width="200" height="50" style="color:#0b5cad; font-size:16px; font-family:Arial, sans-serif;">
| Cliente | Alt con estilo | A tener en cuenta |
|---|---|---|
| Gmail | Sí | Imágenes mostradas por defecto (ayuda de Gmail) |
| Outlook.com | Sí | Webmail, distinto de Outlook de escritorio |
| Apple Mail | Sí | Probado por Litmus |
| Outlook para Mac | Sí | Distinto de Outlook para Windows |
| Outlook de escritorio 2007-2019 | No | Alt simple, solo con las imágenes desactivadas |
| Yahoo! Mail (webmail) | No | No muestra ningún alt según Litmus |
Litmus precisa que el bloqueo por defecto de Outlook de escritorio procede de sus pruebas con Outlook 2016, sin nueva comprobación desde entonces. Repite una prueba de renderizado antes de construir un correo a partir de esta tabla.
Botón bulletproof en lugar de CTA en imagen
Un botón bulletproof es un botón construido con HTML y CSS: una celda de tabla de color que contiene un enlace en texto real. Sigue siendo visible y pulsable con las imágenes desactivadas, mientras que un botón en imagen desaparece o se reduce a su alt. Outlook de escritorio renderiza el HTML con el motor de Word desde Outlook 2007, como indica la documentación de Microsoft. Para esas versiones, algunas plantillas de botón añaden un fragmento VML (Vector Markup Language), que no se detalla aquí.
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#0b5cad" style="border-radius:4px;">
<a href="https://ejemplo.com/guia" style="display:inline-block; padding:12px 24px; color:#ffffff; font-family:Arial, sans-serif; text-decoration:none;">Descargar la guía</a>
</td></tr></table>El código anterior da un botón con 12 px de relleno vertical y 24 px horizontal, en #0b5cad con texto blanco #ffffff. El mismo principio vale para cualquier texto importante (título, oferta, fecha, enlace de baja): en HTML, no en una imagen. Un enlace de acción como el botón «añadir al calendario» tiene que seguir siendo legible sin imagen. Un correo hecho solo de imagen se ve casi vacío en Outlook de escritorio mientras el suscriptor no descargue nada. Litmus recomienda mantener el texto y los botones en HTML: la prueba que cuenta es la legibilidad sin imagen.
Conserva también una versión en texto plano coherente y vigila el peso de las imágenes, que influye en la visualización de los suscriptores con conexión lenta.
Probar con las imágenes desactivadas
En Gmail, abre Configuración > Ver todos los ajustes, baja hasta la sección Imágenes y marca Preguntar antes de mostrar imágenes externas. Pulsa Guardar cambios al final de la página y vuelve a abrir tu envío. En Outlook de escritorio, el bloqueo está activo por defecto; si no, abre Archivo > Opciones > Centro de confianza > Configuración del Centro de confianza y marca «No descargar automáticamente imágenes en mensajes de correo electrónico HTML ni en elementos RSS». Complétalo con una herramienta de vista previa de correos.
Comprueba que el botón principal sigue siendo legible y que cada alt tiene sentido por sí solo. Un texto alternativo cuidado no salva un correo que rebota: pasa también la lista por una verificación de direcciones antes del envío para detectar las direcciones no válidas.
