Lista de accesibilidad para emails HTML: alt, contraste, enlaces y variables

Un email puede entregarse correctamente y seguir siendo difícil de usar. Una imagen sin descripción puede contener la única explicación de una oferta. Una fecha con poco contraste puede pasar desapercibida. Un botón que dice "Haz clic aquí" deja de tener sentido cuando se lee fuera de contexto.

La accesibilidad no es un adorno para una campaña perfecta. Forma parte de comprobar que la persona destinataria puede entender el mensaje que decidiste enviar.

Abre gratis EasyAImail Email HTML Preflight para pegar o subir el HTML final y revisar el informe en tu navegador.

Empieza por la información que no puede perderse

Antes de ajustar una regla de estilo, identifica lo que la persona debe poder comprender:

• Quién envía el email.
• Qué ha cambiado o necesita atención.
• Qué acción se espera.
• A dónde lleva esa acción.
• Qué fecha, precio, pedido o dato de cuenta afecta la decisión.

Siempre que sea posible, expresa esos datos como texto real. Una imagen puede reforzar el mensaje, pero no debería ser el único lugar donde aparece una instrucción importante.

Escribe el tipo correcto de texto alt

El texto alt no consiste en narrar cada detalle de una imagen. Debe comunicar la función de la imagen cuando esa función importa.

Si una imagen presenta una oferta concreta, describe la oferta o asegúrate de que aparece también cerca en texto. Si la imagen funciona como botón, deja claro su destino o acción. Si la imagen es meramente decorativa, alt="" suele ser preferible para que un lector de pantalla no anuncie información inútil.

El comprobador avisa de imágenes sin alt porque el código por sí solo no puede decidir si una imagen era esencial. La alerta pide una decisión deliberada, no rellenar todos los atributos con la palabra "imagen".

Haz que los enlaces se entiendan por sí mismos

Evita etiquetas genéricas como "Haz clic aquí", "Más información" o una URL desnuda cuando el contexto pueda perderse. Un enlace mejor explica a dónde va o qué permite hacer:

• "Revisar la propuesta actualizada"
• "Descargar la factura de noviembre"
• "Elegir una fecha de entrega"

Un texto de enlace claro ayuda al escaneo visual, a la tecnología de asistencia y a cualquiera que vuelva al email días después. También hace que el mensaje suene menos automático.

Comprueba el contraste donde se toma la decisión

No revises solo el titular. Mira etiquetas pequeñas, fechas límite, botones, instrucciones de pie y mensajes de estado. Un contraste pobre en esos lugares puede hacer que la persona pierda una acción necesaria.

No uses únicamente color para expresar aprobación, urgencia, éxito o error. Acompaña el color con texto de estado y un siguiente paso claro. Así el mensaje también resiste mejor las transformaciones del modo oscuro.

No dejes variables visibles para el destinatario

Una variable como {{first_name}} parece un detalle de plantilla hasta que aparece en el saludo. En ese momento, la persona ve el mecanismo en lugar de una comunicación revisada.

El comprobador trata las variables Handlebars o Mustache sin resolver en texto como un bloqueo de envío. Revisa las variables, los nombres, las fechas, los importes y las frases condicionales en el HTML final. Un diseño atractivo no hace que un dato incompleto parezca personal.

No dejes que la maquetación esconda el mensaje

Una URL interminable, una imagen demasiado ancha o un bloque de ancho fijo pueden volver incómodo un email en pantalla pequeña. El informe incluye comprobaciones de desbordamiento e imágenes porque un fallo estructural puede ser tan dañino como una palabra ausente.

Usa encabezados claros, una longitud de línea razonable y un orden que siga funcionando cuando las columnas se apilen. Si utilizas tablas para maquetar, conserva un orden de lectura lógico. La tabla debe sostener la comprensión, no depender de que todos los estilos funcionen.

Lista práctica antes de enviar

1. El mensaje esencial y la acción principal aparecen en texto real, no solo en una imagen.
2. Cada imagen significativa tiene alt útil; las decorativas usan alt vacío.
3. Los enlaces y botones explican acción o destino sin depender del color cercano.
4. Texto importante, fechas y botones mantienen contraste suficiente.
5. Nombres, fechas, importes y variables ya están resueltos en la salida final.
6. El email no necesita una pantalla ancha, una imagen de fondo o un efecto hover para tener sentido.

Qué comprueba EasyAImail y qué sigues decidiendo tú

EasyAImail Email HTML Preflight reúne alt ausente, contraste bajo, enlaces provisionales, variables sin resolver, problemas de imagen, desbordamiento y riesgos de compatibilidad en un informe local del navegador. Es útil para encontrar fallos que una revisión apresurada puede pasar por alto.

No puede saber si una fecha es sensible, si una descripción de producto es correcta o si una frase encaja con un cliente de larga relación. La revisión final sigue siendo tuya.

Cuando el correo empieza desde cero, la aplicación web de EasyAImail parte de tu intención: recomienda plantillas, tú eliges una, completas los datos que faltan y revisas el HTML. Para un borrador existente de Gmail u Outlook, el complemento de navegador ofrece una revisión que tú activas y cambios locales de texto.

Preguntas frecuentes

¿Todas las imágenes deben tener alt?

Las imágenes con significado deben tener un alt que explique su función. Las decorativas suelen usar alt vacío para que se omitan en vez de convertirse en ruido.

¿"Haz clic aquí" es buen texto para un botón?

Normalmente es más débil que describir la acción. "Ver los detalles de tu cuenta" o "Descargar la guía" dan contexto real.

¿Por qué importa tanto una variable sin reemplazar?

Porque rompe la confianza justo donde el lector la percibe. Ver {{first_name}} indica que nadie revisó por completo el email.

¿Un comprobador de accesibilidad puede decidir si mi tono es correcto?

No. El análisis estático detecta riesgos de estructura y contenido. Tú debes evaluar si los hechos, la relación y la petición encajan con la persona concreta.

La accesibilidad también es una lectura final cuidadosa

Pasa el HTML definitivo por EasyAImail Email HTML Preflight, pero no conviertas una puntuación en sustituto de criterio. La meta es sencilla: que cada destinatario pueda entender qué dices y qué esperas que haga después.