Una agencia gubernamental envió una notificación importante de prestaciones a millones de destinatarios. El email se veía precioso—diseño limpio, jerarquía clara, llamada a la acción destacada. Pero para el 15% de los destinatarios que usan lectores de pantalla, era incomprensible. Las imágenes no tenían texto alternativo. El orden de lectura estaba desordenado. Los enlaces decían "haz clic aquí" sin contexto. Miles de personas no pudieron acceder a la información que necesitaban.
La accesibilidad en email no es opcional—es esencial. Más allá de los requisitos legales en muchas jurisdicciones, los emails accesibles simplemente funcionan mejor para todos. Las prácticas que ayudan a los usuarios de lectores de pantalla también mejoran la legibilidad en móvil, el rendimiento en conexiones de baja velocidad y la experiencia general del usuario.
Por qué importa la accesibilidad en email
La accesibilidad afecta a más personas de lo que crees.
Las discapacidades visuales van desde ceguera total hasta daltonismo o baja visión. Las personas que usan lectores de pantalla necesitan contenido correctamente estructurado. Los usuarios con daltonismo necesitan que la información se transmita por más vías que solo el color. Los usuarios con baja visión necesitan contraste suficiente y texto escalable.
Las discapacidades motoras afectan cómo interactúan las personas con los emails. Algunos usuarios no pueden usar ratón y navegan únicamente con teclado. Las áreas táctiles deben ser lo suficientemente grandes para usuarios con destreza limitada.
Las discapacidades cognitivas afectan cómo se procesa la información. Un lenguaje claro, estructura consistente y contenido enfocado ayudan a usuarios con dislexia, TDAH y otras diferencias cognitivas.
Las limitaciones situacionales nos afectan a todos a veces. Leer un email a pleno sol, en una pantalla pequeña o mientras estás distraído crea necesidades de accesibilidad temporales. Las buenas prácticas de accesibilidad ayudan en todas estas situaciones.
Existen requisitos legales en muchos lugares. La ADA en EE. UU., la Equality Act en el Reino Unido y leyes similares en otros países exigen comunicaciones accesibles. Aunque la aplicación específica al email es limitada, el panorama legal está evolucionando.
Estructura semántica
Una estructura HTML adecuada es la base del email accesible.
Usa elementos HTML semánticos de forma apropiada. Los encabezados (h1, h2, h3) deben reflejar la jerarquía del contenido, no solo el estilo visual. Un usuario de lector de pantalla que navega por encabezados debería entender la estructura de tu email.
No te saltes niveles de encabezado. Pasar de h1 a h3 sin h2 confunde a los lectores de pantalla y a los usuarios. Mantén una jerarquía lógica incluso si quieres tamaños visuales distintos.
Usa listas para contenido en formato lista. Si presentas una serie de elementos, utiliza elementos ul o ol, no solo saltos de línea. Los lectores de pantalla anuncian las listas y su longitud, lo que ayuda a los usuarios a entender la estructura del contenido.
Las tablas deben usarse solo para datos tabulares, no para maquetación. Si debes usar tablas para maquetar (a veces el renderizado de email lo requiere), utiliza role="presentation" para indicar a los lectores de pantalla que ignoren la estructura de la tabla.
El orden de lectura importa. Los lectores de pantalla siguen el orden del DOM, no el visual. Si tu email usa maquetaciones complejas, asegúrate de que el orden HTML tenga sentido al leerse linealmente.
Imágenes y texto alternativo
Las imágenes necesitan alternativas textuales para los usuarios que no pueden verlas.
Toda imagen significativa necesita texto alternativo. Describe qué muestra la imagen y por qué importa. "Foto del producto" es pobre. "Zapatillas azules para correr, modelo X500, ahora con 30% de descuento" es útil.
Las imágenes decorativas deben tener atributos alt vacíos (alt=""). Esto indica a los lectores de pantalla que las omitan. No omitas el atributo alt por completo: eso hace que los lectores de pantalla lean el nombre del archivo, lo cual es peor.
Las imágenes complejas como gráficos o infografías necesitan descripciones detalladas. Proporciona texto alternativo completo o un enlace a una descripción en texto. Un gráfico que muestra tendencias de ventas necesita que los datos reales se transmitan en texto.
No confíes en las imágenes para información crítica. Si tu CTA es una imagen, ¿qué ocurre cuando las imágenes no se cargan? Ten siempre alternativas en texto para el contenido esencial.
Los emails compuestos solo por imágenes son inaccesibles por definición. Algunos destinatarios bloquean las imágenes por defecto. Los usuarios de lectores de pantalla no obtendrán nada útil. Incluye siempre contenido en texto real.
Color y contraste
Las elecciones de color impactan significativamente en la accesibilidad.
Mantén un contraste suficiente entre el texto y el fondo. Las pautas WCAG recomiendan al menos una relación de contraste de 4.5:1 para texto normal y 3:1 para texto grande. Usa herramientas para comprobar el contraste y verificarlo.
No transmitas información solo mediante el color. Si usas rojo para errores y verde para éxito, usa también iconos, etiquetas de texto u otros indicadores. Los usuarios con daltonismo pueden no distinguir el rojo del verde.
Cuidado con el texto en gris claro. Es una tendencia, pero a menudo incumple los requisitos de contraste. Ese elegante gris claro sobre blanco puede ser ilegible para muchos usuarios.
Prueba con simuladores de daltonismo. Existen herramientas que muestran cómo aparece tu email a usuarios con distintos tipos de daltonismo. Lo que para ti es obvio puede ser invisible para ellos.
El modo oscuro afecta la percepción del color. Si tu email admite modo oscuro, prueba el contraste en ambos modos. Colores que funcionan sobre fondos claros pueden fallar sobre fondos oscuros.
Enlaces y botones
Los elementos interactivos requieren atención especial para la accesibilidad.
El texto de los enlaces debe ser descriptivo. "Haz clic aquí" y "Más información" no significan nada fuera de contexto. Los usuarios de lectores de pantalla suelen navegar por los enlaces, escuchándolos en una lista. "Descarga el informe anual 2024" es mucho más útil que "Haz clic aquí".
No uses URLs como texto de enlace a menos que la propia URL sea el objetivo. "Visita https://example.com/really/long/path/to/page" es difícil de leer y escuchar. Usa texto descriptivo en su lugar.
Los botones deben parecer botones. Si algo es clicable, hazlo visualmente obvio. No confíes solo en estados hover: los usuarios móviles y quienes navegan con teclado no hacen hover.
Las áreas táctiles deben medir al menos 44x44 píxeles. Enlaces y botones pequeños son difíciles de tocar con precisión, especialmente para usuarios con discapacidades motoras.
La navegación con teclado debe funcionar. Los usuarios deberían poder recorrer con tab todos los elementos interactivos en un orden lógico. Los estados de foco deben ser visibles.
Contenido y lenguaje
Cómo escribes afecta a la accesibilidad tanto como cómo codificas.
Usa lenguaje sencillo. Frases cortas, palabras comunes y estructura clara ayudan a todos, especialmente a usuarios con discapacidades cognitivas o que leen en un segundo idioma.
Coloca la información importante primero. Pon el mensaje clave al principio. Los usuarios que escanean o usan lectores de pantalla se benefician de conocer el punto principal de inmediato.
Divide el contenido largo. Usa encabezados, párrafos cortos y viñetas. Muros de texto son difíciles para todos y especialmente desafiantes para usuarios con dislexia o dificultades de atención.
Especifica el idioma. Usa el atributo lang en tu elemento HTML. Los lectores de pantalla lo usan para pronunciar el contenido correctamente. Un lector de pantalla en inglés pronunciando mal texto en francés es confuso.
Evita el texto justificado. La justificación completa crea espaciados irregulares que dificultan la lectura, especialmente para usuarios con dislexia. El texto alineado a la izquierda es más accesible.
Pruebas de accesibilidad
No puedes saber si tus emails son accesibles sin probarlos.
Usa tú mismo lectores de pantalla. NVDA (gratuito para Windows), VoiceOver (integrado en Mac/iOS) y TalkBack (Android) te permiten experimentar tu email como lo hacen los usuarios de lectores de pantalla. Incluso pruebas breves revelan problemas obvios.
Las herramientas de prueba automatizadas detectan algunos problemas. Herramientas como WAVE, axe y Lighthouse pueden escanear en busca de problemas de accesibilidad. No detectarán todo, pero encuentran rápidamente problemas comunes.
Prueba sin imágenes. Desactiva la carga de imágenes y comprueba si tu email sigue teniendo sentido. Esto simula tanto escenarios de accesibilidad como comportamientos comunes de clientes de email.
Prueba solo con teclado. ¿Puedes navegar por tu email sin ratón? ¿Puedes activar todos los enlaces y botones? ¿El orden del foco es lógico?
Prueba con distintos niveles de zoom. Aumenta el zoom del navegador al 200% y verifica si tu email sigue siendo usable. Muchos usuarios con baja visión navegan con altos niveles de zoom.
Limitaciones de los clientes de email
La accesibilidad en email enfrenta desafíos únicos debido a las limitaciones de los clientes.
El soporte de CSS varía muchísimo. Lo que funciona en navegadores web puede no funcionar en Outlook o Gmail. Prueba en distintos clientes para asegurar que las funciones de accesibilidad se mantienen.
El soporte de ARIA es limitado. Atributos ARIA avanzados que funcionan en la web a menudo no funcionan en clientes de email. Apóyate en HTML semántico en lugar de depender de ARIA.
Los elementos interactivos están restringidos. JavaScript no funciona en email. Las funciones de accesibilidad que dependen de scripting no operarán.
El manejo del modo oscuro varía. Algunos clientes invierten colores automáticamente, lo que puede romper las relaciones de contraste que diseñaste cuidadosamente. Prueba en modo oscuro en distintos clientes.
A pesar de las limitaciones, los fundamentos funcionan en todas partes. Estructura semántica, texto alternativo, contraste suficiente y contenido claro están soportados en todos los clientes de email.
Crear flujos de trabajo de email accesibles
Una accesibilidad sostenible requiere proceso, no solo conocimiento.
Incluye la accesibilidad en tus plantillas de email. Incorpora patrones accesibles en tus plantillas base para que cada email parta de una buena base.
Crea una lista de verificación de accesibilidad. Antes de enviar, verifica texto alternativo, contraste, texto de enlaces y estructura. Haz que esto sea parte de tu proceso estándar de revisión.
Forma a tu equipo. Todos los involucrados en la creación de emails—diseñadores, redactores, desarrolladores—deben entender los conceptos básicos de accesibilidad.
Recoge comentarios. Si es posible, incluye a usuarios con discapacidades en tus pruebas. Su experiencia del mundo real revela problemas que las pruebas automatizadas pasan por alto.
Frequently asked questions
¿Es legalmente obligatoria la accesibilidad en email?
Depende de tu jurisdicción y del tipo de organización. Las agencias gubernamentales y muchas empresas tienen obligaciones legales. Incluso sin requisitos legales, la accesibilidad es una buena práctica que mejora la experiencia para todos los usuarios.
¿Funcionan los lectores de pantalla con el email?
Sí. Las personas que usan lectores de pantalla acceden al email a través de su cliente de correo o webmail, y el lector de pantalla lee el contenido. Qué tan bien funcione depende de lo accesible que esté codificado el email.
¿Cuál es la mejora de accesibilidad más importante?
El texto alternativo para las imágenes suele ser la mejora rápida más grande. Muchos emails tienen imágenes sin texto alternativo, lo que los hace incomprensibles para usuarios de lectores de pantalla. Añadir texto alternativo significativo es sencillo y de gran impacto.
¿La accesibilidad perjudica el diseño del email?
No. El diseño accesible es buen diseño. Un contraste suficiente, una jerarquía clara y un texto legible mejoran la experiencia para todos. Los emails mejor diseñados también son los más accesibles.