Accesibilidad en correos HTML: Guía para desarrolladores
Crea correos que funcionen para todos, incluidos los usuarios con discapacidades.
Aproximadamente el 15% de la población mundial vive con alguna forma de discapacidad. Muchos usan tecnologías de asistencia como lectores de pantalla para acceder al correo electrónico. El diseño accesible de correos es tanto ético como práctico, ya que a menudo mejora la experiencia para todos.
La accesibilidad en correos presenta desafíos únicos. Los diseños basados en tablas necesarios para la compatibilidad entre clientes pueden confundir a los lectores de pantalla. Esta guía cubre técnicas que hacen que los correos funcionen para todos los usuarios.
Estructura semántica
Usa atributos de rol
Las tablas usadas para diseño deben marcarse con role="presentation" para indicar a los lectores de pantalla que no son tablas de datos:
<table role="presentation" width="100%">
<tr>
<td>
Layout content here
</td>
</tr>
</table>Sin este atributo, los lectores de pantalla anuncian la navegación de tabla ("row 1, column 1"), lo cual es confuso para tablas de diseño.
Jerarquía correcta de encabezados
Usa elementos de encabezado (h1, h2, h3) en orden lógico:
<h1 style="font-size: 24px; margin: 0;">Welcome to Our Service</h1>
<p>Introduction paragraph...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">What's New</h2>
<p>Feature description...</p>
<h2 style="font-size: 20px; margin: 20px 0 10px 0;">Getting Started</h2>
<p>Instructions...</p>Los usuarios de lectores de pantalla navegan por encabezados. Una jerarquía adecuada les ayuda a entender la estructura del documento y saltar a secciones relevantes.
Usa elementos semánticos
Donde sea soportado, usa HTML semántico:
- <p> para párrafos
- <ul>/<ol> para listas
- <strong> para texto importante
- <em> para énfasis
Imágenes y texto alternativo
Texto alternativo significativo
Cada imagen necesita texto alternativo apropiado:
<!-- Informative image: describe the content -->
<img src="product.jpg" alt="Blue running shoes with white soles" />
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" />
<!-- Image with text: include the text -->
<img src="sale-banner.jpg" alt="50% off all items this weekend" />Directrices:
- Describe lo que muestra la imagen, no que es una imagen
- Mantén el texto alt conciso (menos de 125 caracteres)
- Para imágenes decorativas, usa alt="" (vacío, no omitido)
- Si una imagen contiene texto, incluye ese texto en alt
No dependas solo de imágenes
Algunos usuarios tienen las imágenes desactivadas. La información importante debe estar en texto, no solo en imágenes. Si usas un botón de imagen, incluye un enlace de texto de respaldo.
Color y contraste
Relaciones de contraste suficientes
WCAG 2.1 requiere relaciones de contraste mínimas:
- Texto normal: relación de contraste 4.5:1
- Texto grande (18px+ o 14px+ negrita): relación 3:1
<!-- Good contrast -->
<p style="color: #333333; background-color: #ffffff;">
High contrast text
</p>
<!-- Poor contrast (avoid) -->
<p style="color: #999999; background-color: #ffffff;">
Low contrast text
</p>Usa herramientas de verificación de contraste como el verificador de contraste de WebAIM para comprobar.
No uses solo el color
El color no debe ser la única forma de transmitir información:
<!-- Bad: color only -->
<span style="color: red;">Error</span>
<!-- Good: color plus icon/text -->
<span style="color: red;">⚠ Error: Invalid email address</span>Enlaces y botones
Texto descriptivo para enlaces
El texto del enlace debe describir el destino:
<!-- Bad -->
<a href="...">Click here</a>
<!-- Good -->
<a href="...">View your order details</a>
<!-- Good -->
<a href="...">Download the 2026 report (PDF, 2MB)</a>Los usuarios de lectores de pantalla a menudo navegan por enlaces. "Click here" repetido varias veces es inútil. El texto descriptivo ayuda a los usuarios a entender a dónde va cada enlace.
Indicadores de enfoque
Los enlaces y botones deben tener estados de enfoque visibles para usuarios de teclado. Aunque los clientes de correo lo manejan de forma inconsistente, puedes probar:
<a href="..." style="outline: 2px solid #007bff;">
Link text
</a>Idioma y lectura
Declara el idioma
Especifica el idioma del documento:
<html lang="en">Los lectores de pantalla usan esto para seleccionar la pronunciación correcta. Para contenido en otros idiomas, usa el atributo lang en elementos específicos:
<p>The French word <span lang="fr">bonjour</span> means hello.</p>Tamaños de fuente legibles
Mínimo 14px para texto del cuerpo, preferiblemente 16px. Altura de línea de 1.4-1.6 mejora la legibilidad:
<p style="font-size: 16px; line-height: 1.5;">
Body text that is easy to read
</p>Pruebas de accesibilidad
Pruebas con lectores de pantalla
Prueba con lectores de pantalla reales si es posible:
- VoiceOver (macOS/iOS): Integrado, actívalo con Cmd+F5
- NVDA (Windows): Gratis, ampliamente usado
- JAWS (Windows): Estándar de la industria, de pago
Escucha cómo se anuncia tu correo. ¿Es clara la estructura? ¿Se describen las imágenes? ¿Son significativos los enlaces?
Pruebas automatizadas
Herramientas como Litmus y Email on Acid incluyen verificadores de accesibilidad. Detectan problemas comunes como texto alt faltante y problemas de contraste.
Constructores de correos y accesibilidad
Los buenos constructores de correos manejan algo de accesibilidad automáticamente. Sequenzy y plataformas similares agregan role="presentation" a tablas de diseño, piden texto alt en imágenes y generan HTML semántico.
Frameworks como MJML producen salida accesible por defecto. Los componentes están diseñados pensando en los lectores de pantalla.
Lista de verificación de accesibilidad
Antes de enviar:
- Todas las tablas de diseño tienen role="presentation"
- Todas las imágenes significativas tienen texto alt descriptivo
- Imágenes decorativas tienen alt="" vacío
- Encabezados están en orden lógico (h1, h2, h3)
- El contraste de color cumple con los requisitos de WCAG
- Los enlaces tienen texto descriptivo
- El idioma está declarado
- El tamaño de fuente es al menos 14px
En resumen
El correo accesible no es difícil cuando entiendes lo básico. Usa estructura semántica, proporciona texto alt, asegura contraste y escribe enlaces descriptivos. Estas prácticas benefician a todos los usuarios, no solo a aquellos con discapacidades.
Si estás usando un constructor o framework de correos, verifica que siga las mejores prácticas de accesibilidad. Las buenas herramientas hacen la accesibilidad más fácil. Sequenzy y otras plataformas modernas incluyen características de accesibilidad por defecto.