La guía definitiva para correos electrónicos accesibles

Como especialistas en marketing por correo electrónico, nos esforzamos por ofrecer la experiencia de correo electrónico perfecta a nuestros suscriptores. Nos aseguramos de que nuestros correos electrónicos se envíen en el momento adecuado según nuestros análisis y de que se envíen a la bandeja de entrada mediante el control de nuestra capacidad de entrega y la ejecución de pruebas de spam. Personalizamos nuestro contenido para que sea más relevante y modificamos nuestro diseño para asegurarnos de que nuestros correos electrónicos se reproduzcan perfectamente en innumerables dispositivos y en todos los clientes de correo electrónico.

Todos estos son pasos recomendados para garantizar que sus correos electrónicos generen una conversión. Sin embargo, una gran parte de sus suscriptores podría perder sus correos electrónicos: personas con discapacidades visuales, físicas o cognitivas y neurológicas.

Solo se necesitan unos pocos pasos para que sus correos electrónicos sean más accesibles para todos sus suscriptores. En esta publicación, discutiremos cuáles son esos pasos y cómo pueden mejorar el correo electrónico para todos.

¿Su correo electrónico es accesible? Las comprobaciones de accesibilidad en la lista de verificación de Litmus facilitan la prueba de su correo electrónico con las mejores prácticas clave de accesibilidad, identifican áreas de mejora y hacen que sus correos electrónicos sean más accesibles para todos sus suscriptores. Más información →

¿Qué es la accesibilidad?

La accesibilidad es uno de los pilares fundamentales de la experiencia y el diseño del usuario. Para el correo electrónico, significa asegurarse de que todos puedan recibir y comprender su mensaje, independientemente de las discapacidades o dispositivos de asistencia que puedan estar usando.

Puede pensar en la accesibilidad en el correo electrónico como una extensión del trato con clientes de correo electrónico con un soporte deficiente. Incluir soluciones alternativas y alternativas garantiza que cada suscriptor reciba una experiencia positiva.

Como desarrolladores de correo electrónico, pasamos horas haciendo que un correo electrónico se vea bien en un cliente con menos del 1% de participación de mercado, pero muy pocos de nosotros dedicaremos unos minutos a hacer que el correo electrónico sea accesible.
- Mark Robbins, correo rebelde

Accesibilidad en el diseño de correo electrónico

Comencemos analizando los aspectos visuales de su correo electrónico que pueden afectar la accesibilidad y dónde se pueden realizar mejoras.

Utilice el color de forma inteligente

Es posible que los suscriptores con daltonismo no puedan diferenciar algunos colores en su correo electrónico, así que asegúrese de que el color no sea la única forma en que se transmite la información.

El contraste de color también puede plantear problemas a los suscriptores con dificultades visuales. Utilice un alto contraste de color entre los diferentes elementos de su correo electrónico, especialmente entre la copia y los colores de fondo. Una forma de hacerlo es utilizar el Comprobador de contraste de color de WebAim para comprobar la relación de contraste de los colores de su correo electrónico.

¿Son accesibles sus correos electrónicos? Vea cómo se ven sus correos electrónicos para los usuarios con discapacidad visual mediante el filtro de daltonismo en las vistas previas de correo electrónico de Litmus. Prueba Litmus gratis →

No cree contenido dañino

El contenido que parpadea a ciertas velocidades o en patrones, como los GIF animados, puede causar convulsiones fotosensibles en algunas personas. Evite mostrar contenido o incluir enlaces a videos que puedan tener contenido similar.

Equilibrar texto e imágenes

Mientras que los usuarios videntes pueden escanear visualmente u omitir contenido no relevante, los usuarios ciegos deben escuchar todo el contenido del correo electrónico, un correo electrónico a la vez. Adapte el contenido escrito en su correo electrónico para entregar el mensaje principal. Además, considere qué tan compatible es su diseño con lectores de pantalla populares como JAWS o Window-Eyes.

Mejore la legibilidad de su correo electrónico

Utilice tamaños de fuente más grandes

Cualquier cosa menor a 14 píxeles en una pantalla de computadora de escritorio o portátil requiere algo de esfuerzo para leer. Los usuarios pueden aumentar el nivel de zoom en sus dispositivos para ayudarlos a leer sus pantallas, pero esto puede tener un impacto negativo en su correo electrónico, que puede aparecer roto o cortado.

El texto puede parecer más pequeño en los dispositivos móviles, lo que obliga a los usuarios a esforzarse más para leer su correo electrónico. Utilice consultas de medios para aumentar el tamaño de fuente mínimo de 14 a 16 píxeles en dispositivos más pequeños para ayudar a los usuarios a leer su correo electrónico:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Dale a tu copia espacio para respirar

Para algunos, puede ser difícil leer párrafos y bloques de texto en los que las líneas de texto están muy juntas. Establezca una altura de línea adecuada en el texto para que sea más fácil de leer para todos. Recomendamos elegir una altura de línea que sea 4 píxeles más que el tamaño de la fuente.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Sugerencia: cuando aumente el tamaño de fuente para dispositivos móviles, no olvide aumentar también la altura de la línea.

Los párrafos de la copia también necesitan espacio para respirar para facilitar la legibilidad. Al escanear un correo electrónico, debería ser fácil identificar los párrafos y poder mantener su lugar. Cree suficiente espacio en blanco por encima y por debajo de los párrafos.

Un paso más para facilitar la lectura del texto es alejarlo de los bordes de sus correos electrónicos. Agregar relleno a una celda de tabla o etiqueta de párrafo lo ayudará a lograr esto.

Evite la copia justificada en su correo electrónico

Copia "justificada" significa que el espaciado entre letras y palabras se ajusta para que el texto quede alineado con los márgenes izquierdo y derecho. Si bien es común en la impresión, el espaciado inconsistente entre palabras puede hacer que la copia justificada sea difícil de leer. Se ha demostrado que el texto alineado a la izquierda es más fácil de leer para todos.

Elija el tipo de letra correcto

El uso de fuentes web ha aumentado la cantidad de posibles tipos de letra que se pueden usar en el correo electrónico, pero antes de decidir usar Lobster como fuente de su cuerpo, piense en lo accesible que es. Al seleccionar el tipo de letra para su correo electrónico, elija uno que esté espaciado uniformemente y no demasiado condensado. Esta es una buena idea no solo para la accesibilidad, sino también para los usuarios de dispositivos móviles.

Utilice elementos semánticos

La inclusión de elementos semánticos les da a sus suscriptores que usan lectores de pantalla la opción de "escanear" un correo electrónico por encabezado. Puede hacerlo mediante las etiquetas <p> y <h>. Estos son compatibles con todos los clientes, por lo que es un buen lugar para comenzar a hacer que su correo electrónico sea más accesible.

Históricamente, aplicar estilos a las etiquetas <p> y <h> no ha sido fácil, por lo que todavía es poco común ver que estas etiquetas se usen en el correo electrónico. Los márgenes alrededor del texto envuelto en cualquiera de estas etiquetas eran difíciles de administrar, pero con un código como este, podrá controlar ese espacio en blanco:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Consejo: usando mso-line-height-rule: exactamente; en sus etiquetas <h> mantendrá la regla de altura de línea que estableció en los clientes de correo electrónico de Microsoft Outlook.

Mire este clip de Litmus Live 2017 mientras el desarrollador de correo electrónico Paul Airy explica por qué y cómo usa elementos HTML semánticos en sus correos electrónicos para hacerlos más accesibles:

Tweet este video →

Aprenda de los expertos de Litmus Live Conviértase en un mejor comercializador de correo electrónico con consejos del mundo real, mejores prácticas y conclusiones prácticas cuando se una a nosotros para la conferencia Litmus Live. Más información →

Escribir copia legible

La creación de un correo electrónico más accesible y legible no solo depende de cómo se codifica el correo electrónico, sino también de cómo se escribe la copia. Hacer que la copia de su correo electrónico sea más humana ayudará a su legibilidad y ayudará a construir una comunicación 1: 1 entre usted y sus suscriptores.

La prueba más popular, conocida como prueba de facilidad de lectura de Flesch-Kincaid, se puede encontrar en Microsoft Word y calcula qué tan fácil es leer su contenido en una escala de 0 a 100. Eso significa:

• Un estudiante de 11 años entenderá fácilmente una puntuación de 90-100.
• Los estudiantes de 13 a 15 años entenderán fácilmente una puntuación de 60 a 70.
• Los estudiantes universitarios comprenderán una puntuación de 30 a 50.
• Los graduados universitarios comprenderán mejor una puntuación de 0 a 30

Hacer algo más "legible" no debería significar que te alejes de temas complicados o de peso. En lugar de simplificar su escritura, se refiere a la accesibilidad del texto. Su punto óptimo está entre 60 y 70 para captar una audiencia general. Por supuesto, si su audiencia tiene un alto nivel educativo, no tenga miedo de usar un lenguaje más complejo.

También puede mejorar la legibilidad editando su copia para que sea directa y al grano.

Crea contenido accesible

Hacer que los enlaces se puedan hacer clic / tocar

Asegurarse de que el tamaño de sus botones a prueba de balas sea lo suficientemente grande para que los usen los pulgares y los dedos en dispositivos móviles también ayudará con la accesibilidad de su correo electrónico. Un botón más grande será beneficioso para aquellos que no pueden controlar un mouse con precisión.

Me gustan los botones grandes y no puedo mentir.
- Justine Jordan, tornasol

Si bien las Pautas de interfaz humana de iPhone de Apple recomiendan un ancho y alto mínimo de 44 píxeles para los botones, este número varía según el proveedor del dispositivo móvil. Una regla general alternativa sería usar un ancho y alto mínimo de 72 píxeles, ya que este es el ancho de píxel promedio de un pulgar.

Desterrar la copia del enlace "Haga clic aquí"

Evite utilizar "haga clic aquí" como copia de sus enlaces. Los usuarios de lectores de pantalla a menudo tabulan el contenido, saltándolo como una forma de escanear un correo electrónico. Dar contexto a sus enlaces ayudará a estos usuarios a decidir si quieren hacer clic o no.

Por ejemplo, si tiene un vínculo que dirige a una lista de productos de zapatos, usar una copia del vínculo como "Ver más zapatos" reduce la ambigüedad del vínculo para los usuarios de lectores de pantalla. Reducir la ambigüedad de los enlaces es beneficioso para todos los suscriptores, ya que no requiere que lean el contexto que rodea al enlace, lo que es bueno para aquellos que escanean correos electrónicos de forma rutinaria sin asimilarlo todo.

No es solo por la accesibilidad, la eliminación de los enlaces "haga clic aquí" moverá el contenido de su correo electrónico para que sea más independiente del dispositivo. Si bien "hacer clic aquí" puede tener sentido para un suscriptor que usa una computadora portátil o de escritorio, pero no para alguien que usa un dispositivo móvil o tableta donde tocar es la acción requerida.

Utilice el atributo ALT correctamente

El atributo ALT ha sido una de las mejores prácticas de correo electrónico desde los albores de los correos electrónicos HTML, debido a que los clientes de correo electrónico bloquean las imágenes de forma predeterminada. El texto utilizado en un atributo ALT adjunto a una imagen se muestra cuando la imagen no se carga. Esto ayuda al suscriptor a "ver" el correo electrónico si tiene imágenes desactivadas de forma predeterminada en su cliente de correo electrónico o si está utilizando un lector de pantalla para leer el correo electrónico.

Para usar correctamente el atributo ALT, el contexto de la imagen debe entenderse completamente en relación con el contenido que la rodea. Primero, debe decidir si la imagen es funcional, ilustrativa o decorativa.

Todas las imágenes requieren atributos ALT, por lo que se debe usar un atributo ALT nulo para imágenes que no necesitan ser leídas por lectores de pantalla ni representan nada vital para el suscriptor.

Vea su correo electrónico con todas las imágenes desactivadas para ayudarlo a decidir qué imágenes requieren el atributo ALT y cuáles pueden tener un atributo nulo.

Para profundizar en la comprensión de cómo el contexto informa el uso del atributo ALT para sus imágenes, visite la página de WebAim sobre el atributo ALT.

Utilice role = ”presentación” en todas sus tablas de presentación

En el diseño de correo electrónico, las tablas se utilizan para contener el contenido y estructurar el diseño del correo electrónico. Las tablas nunca fueron diseñadas para ser utilizadas en el diseño; sin embargo, debido a las restricciones en los clientes de correo electrónico como Outlook, los diseñadores de correo electrónico se han visto obligados a utilizar el elemento <table> como elemento de diseño.

Para ayudar a los lectores de pantalla a comprender la diferencia entre los elementos de <table> que contienen contenido y los que son puramente de diseño, use add role = ”presentation” en cada tabla que contiene contenido que el suscriptor necesita leer. Solo necesita agregarlo a cada elemento <table>, no a cada <td>. Esto evita obligar a un lector de pantalla a leer cada celda de sus tablas de una en una y ayuda al suscriptor a acceder directamente al contenido importante.

Además de role = ”presentación”, aria-hidden = ”true” es otro atributo HTML que se puede agregar a los elementos en su HTML que son para contenido visual y deben estar ocultos a los lectores de pantalla:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role = ”presentación” también se puede utilizar en imágenes. El desarrollador de correo electrónico Remi Parmienter descubrió un comportamiento inusual en Chrome para los usuarios de VoiceOver, una aplicación de lectura de pantalla para MacOS. VoiceOver ha comenzado a leer nombres de archivos para imágenes, incluso si el atributo ALT está presente pero vacío. Se recomienda utilizar el atributo HTML role = ”presentación” en cualquier imagen con un atributo ALT vacío para evitar que se lea el nombre de la imagen.

Correos electrónicos accesibles en acción

Podemos implementar un nivel de accesibilidad si miramos más allá de los desafíos. Concéntrese en lo que puede hacer, no en lo que no puede hacer.
- Paul Airy, Más allá del sobre

Los miembros de la comunidad de Litmus participaron en un concurso de la comunidad para crear un correo electrónico accesible. Las presentaciones ilustraron los pequeños pasos que se pueden tomar para abrir el correo electrónico a una nueva audiencia.

Los suscriptores de este correo electrónico podrán aumentar el tamaño del texto a través de su navegador hasta en un 200% sin romper el diseño del correo electrónico. Y cuenta con un GIF animado que se detiene después de tres ciclos (en cinco segundos) para aquellos que sufren de convulsiones fotosensibles.

Eyal Bitton creó un correo electrónico que usa copia para enlaces que tienen sentido fuera de contexto, y Eyal señala el final del correo electrónico a los suscriptores ciegos mediante el uso de texto oculto.

El boletín de Type E utiliza una mejora progresiva interactiva para permitir al suscriptor elegir entre un tamaño de texto estándar o grande. El desarrollador de correo electrónico Paul Airy también ha incluido una opción, impulsada por una suscripción voluntaria, en la que el suscriptor puede elegir mostrar el correo electrónico con fondos tintados si padece ciertas discapacidades.

Estos correos electrónicos ilustran que solo se necesitan unos pocos pasos para que los correos electrónicos sean más accesibles y potencialmente lleguen a una audiencia más amplia. Muchos de estos pasos no solo ayudan a la accesibilidad, sino que también ayudan a mejorar sus correos electrónicos para todos.

PREVISUALIZAR SUS CORREOS ELECTRÓNICOS CON IMÁGENES ENCENDIDAS Y APAGADAS

¿Quiere ver cómo se ven sus correos electrónicos en más de 60 clientes de correo electrónico de escritorio, móviles y web, incluidas las vistas sin imágenes? Prueba Litmus, ¡gratis!

Empiece a probar ahora →

Guía definitiva para la accesibilidad del correo electrónico Esta guía tiene la información y los consejos paso a paso que necesita para escribir, diseñar y codificar correos electrónicos que cualquier persona puede disfrutar, independientemente de su capacidad. Descarga el ebook →