Pautas de accesibilidad del correo electrónico: estándares y mejores prácticas

Mire a su alrededor, escuche lo que está pasando. ¿Ves todo claro, en modo a todo color? ¿Y escuchas bien los ruidos y las voces? Enhorabuena, sin duda eres una persona afortunada. Además, en realidad eres muy feliz. ¡Tienes visión y oído!

¿Puedes pensar que estas habilidades son comunes y otorgadas por defecto a todos? ¿Qué sucede si le digo que el 4,5 % de los destinatarios de su lista de contactos sufren de daltonismo, por lo que les resulta difícil leer o comprender el contenido de su correo electrónico?

Aunque el daltonismo no es el único trastorno generalizado. Solo un dato básico: 285 millones de personas en todo el mundo sufren discapacidades visuales graves que hacen que ver sea un problema incluso con lentes de contacto o anteojos.

Y el 5% de la población de la Tierra tiene problemas de audición. En otros términos, más de 360 ​​millones.

Eso es algo para pensar. No podemos ignorar a todas esas personas. Debemos hacer todo lo posible para ser amables con ellos y mejorar su vida. De eso se trata la accesibilidad.

Ahora, prepárate una taza de té o café y profundicemos en los detalles.

¿Qué significa la accesibilidad del correo electrónico?

Hay personas que sufren trastornos visuales severos o incluso ceguera total. Están utilizando un software de lectura de pantalla para vocalizar los correos electrónicos de la bandeja de entrada: VoiceOver, Microsoft Narrator y otras herramientas similares. Por lo tanto, nuestro deber es ajustar nuestro contenido a estos asistentes.

Cuando se trata de daltonismo, desde protanopia (cuando las personas no pueden distinguir ciertos colores) hasta monocromatismo, no existen herramientas que ayuden a las personas con estas condiciones. Así que tenemos que optimizar las imágenes de correo electrónico nosotros mismos.

Otros sufren problemas de audición, dislexia, etc. Por lo tanto, existen reglas de accesibilidad para cada tipo de trastorno. Así llegamos a la respuesta a una pregunta en el encabezado.

En pocas palabras, significa cumplir con los estándares que hacen que los correos electrónicos sean legibles para personas con todo tipo de requisitos especiales. Afortunadamente, los creadores de plantillas de correo electrónico HTML modernas y otro software de marketing nos brindan herramientas avanzadas para implementar estos estándares con bastante facilidad y sin habilidades especiales.

Voy a compartir estos estándares a continuación, así como algunas prácticas que serán útiles para crear correos electrónicos accesibles.

Normas de accesibilidad

Entonces, queridos amigos, es hora de explorar uno por uno estos conjuntos de recomendaciones que debemos seguir para enviar correos electrónicos “universales” que serán fáciles de leer para los destinatarios con todo tipo de disfunciones visuales, auditivas y de percepción.

1. Daltonismo

Hay una lista de tipos de daltonismo. Aquí están:

Protanopia significa percepción difunta del color rojo. Los lectores con protanopia, también conocidos como ciegos al rojo, tienden a confundir el color negro con todos los tonos de rojo. Tampoco pueden distinguir el marrón oscuro del verde oscuro y no ven ninguna diferencia entre el color azul y el diapasón medio del rojo. Echa un vistazo a este correo electrónico de Uber:

Y así lo ven los receptores con protanopia:

La deuteranopía es una percepción reducida del verde. Estas personas también tienden a confundir los colores rojo/verde medio, verde brillante/amarillo y azul claro/lila. Nuevamente, eche un vistazo al mismo correo electrónico: original a la izquierda y versión deuteranopía a la derecha.

Tritanopia significa ceguera al color azul y sus matices. Esta es la razón por la que quienes padecen esta deficiencia suelen confundir el azul claro/gris y el morado oscuro/negro. La misma muestra de correo electrónico, pero puede ver la percepción de tritanopia a la derecha:

La monocromía es para el daltonismo total. Estas personas pueden ver la realidad pintada solo en negro, blanco y diferentes tonos de gris. Sin otros colores. Imagínese el mundo en la pantalla de un televisor muy antiguo. Así es como se ve la monocromía. En serio, me pone la piel de gallina.

¿Qué debemos hacer?

• Elija el tamaño de fuente para la copia de correo electrónico no menos de 14 px. Sin embargo, recomiendo 16px para proporcionar a los destinatarios un diseño de correo electrónico accesible;
• Evitar soluciones de contraste basadas en colores que los clientes daltónicos no puedan distinguir. Por ejemplo, no escriba su copia con texto verde o azul sobre un fondo rojo o lila. Mira el mensaje de abajo. Está bien para personas con diapasón completo de percepción de colores… pero ¿es tan bueno en el caso de protanopía o visión monocromática? No me parece…

(Mensaje original)

(así lo verán los clientes con protanopia)

(la forma en que los monocromáticos ven este mensaje)

¿Cómo deberían entender si su equipo favorito ganó o perdió el partido?

• Olvídese de la idea de agregar botones verdes sobre imágenes rojas, o viceversa. Lo mismo es cierto para todas las combinaciones de colores "arriesgadas" mencionadas anteriormente. La idea es realmente mala: las personas con mal funcionamiento de la percepción del color pueden no notar el botón en absoluto;
• Especifique siempre el color del producto entre paréntesis: es posible que los clientes no distingan, por ejemplo, el color rojo, pero saben que las camisas o los vestidos rojos combinan perfectamente con su imagen;
• Haz que los enlaces en tus correos electrónicos estén en negrita.

Sí, el color azul normal para el texto de los enlaces no es suficiente. Y no solo por los destinatarios daltónicos. ¿Alguna vez has leído correos electrónicos en la calle cuando el sol brilla sin piedad en la pantalla del teléfono inteligente? Entonces sabes a lo que me refiero: es difícil distinguir los colores. Así que pon los enlaces en negrita y no los subrayes. ¿Por qué? Porque subrayar puede distraer a las personas con dislexia. Hablaremos sobre la dislexia en detalle un poco más adelante.

En este correo electrónico, los elementos del menú también están en negrita. Esta idea simple optimiza la navegación de los clientes dentro del boletín informativo: encontrarán fácilmente la categoría de apartamentos deseada.

Observe el enlace "Ver detalles" con una flecha. Dice que puede ver más detalles haciendo clic en él;

Si agrega elementos de interactividad o ejecuta pruebas en su campaña, elija colores verde/rojo oscuro/azul claro para resaltar las respuestas correctas. Y rojo/negro/gris respectivamente por mal respectivamente. Asegúrese de duplicar las respuestas sí/no con el texto.

Es realmente esencial verificar si el correo electrónico se ajusta a los requisitos de las personas que sufren de una deficiencia de color. Para su comodidad, me gustaría agregar esta tabla a nuestra publicación. Guárdelo para encontrar los colores a juego y evitar confusiones:

También hay una herramienta gratuita de simulador de daltonismo que muestra tus fotos de la forma en que las percibirán los destinatarios daltónicos.

Como podemos ver, la prueba de color no es demasiado compleja, simplemente no la ignore. Muestre su cuidado por todos los suscriptores. Sé bueno.

2. Ceguera y deficiencias visuales graves

El siguiente capítulo está dedicado a las normas de accesibilidad para personas ciegas y deficientes visuales. Estas reglas también tienen que ver con los trastornos visuales, pero los principios y las soluciones aquí son totalmente diferentes. Ningún esquema de color o combinación de contraste puede ayudar en este caso. Este aspecto de la ciencia de la accesibilidad se basa en el uso de software de lectura de pantalla.

En consecuencia, nuestra misión es ajustar nuestros correos electrónicos a estas herramientas. En otros términos, tenemos que hacer que los correos electrónicos sean legibles para estas herramientas.

¿A qué se debe prestar especial atención aquí?

Asunto del email

Por lo general, los lectores de pantalla comienzan a leer un correo electrónico a partir de su asunto.

Entonces, la regla comúnmente aceptada es simple pero efectiva: haga que su línea de asunto sea breve y descriptiva. Un buen tema debe explicar la esencia central del mensaje.

Opciones de lenguaje

Es muy importante configurar los ajustes de idioma en la copia del correo electrónico. Esta tarea requiere algo de esfuerzo y trabajo con copia de correo electrónico, pero vale la pena. El asunto es que el texto del correo electrónico vocalizado por los lectores de pantalla puede sonar aterrador si ignora estas configuraciones. Algo así como conversaciones de orcos de El señor de los anillos.

Para evitar esto, especifique el idioma respectivo en el código de correo electrónico (si está disponible).

Orden lógico

Los lectores de pantalla tienen un orden estricto sobre cómo vocalizar los correos electrónicos. Leen contenedores y bloques de izquierda a derecha y luego continúan con la siguiente línea.

Para proporcionar accesibilidad, especifique etiquetas de encabezado como <h1> , <h2> , <p> , etc. en código HTML. Estas etiquetas agregarán prioridad sobre el texto normal, por lo que estos elementos se vocalizan primero.

Además, el tamaño de fuente no importa cuando se especifican las etiquetas. En el ejemplo anterior, el tamaño de fuente del título 2 es 24 px, y la fuente de copia normal es más grande: 27 px. Pero los lectores de pantalla vocalizarán el encabezado 2 primero.

texto alternativo

Las tecnologías de IA se están desarrollando constantemente en la actualidad. Pero las herramientas de lectura de pantalla aún no son lo suficientemente inteligentes como para "mirar" las fotos en el correo electrónico y describirlas. Tal vez en un futuro cercano... En la actualidad, estas utilidades solo pueden leer texto alternativo, también conocido como texto Alt, que agregamos a las imágenes.

¿Cómo ajustar el texto alternativo a los estándares de accesibilidad? Ha acertado, es bastante obvio: haga que este texto sea conciso, descriptivo e informativo. Una nota útil: evite la palabra “imagen” en este texto. La etiqueta de la imagen ya lo especifica, por lo que será un poco extraño escuchar la "imagen de la imagen..." duplicada.

Enlaces, elementos de CTA, íconos sociales

Los enlaces deben ser lo más concisos e informativos posible. ¡Agrégueles texto claro y recuerde que los lectores de pantalla transformarán este texto en voz! Hazles saber a los destinatarios lo que les ofreces y adónde irán con un clic.

Basta con mirar estos enlaces:

El primer enlace... eh... en serio, temo imaginar lo espeluznante que sonará. Mientras que el segundo especifica claramente el sitio web, la fecha de publicación y el título de la publicación.

Lo mismo ocurre con los botones CTA y los íconos de redes sociales. De hecho, estos elementos también son hipervínculos, simplemente envueltos en una forma visual estéticamente atractiva. Todo experto en marketing por correo electrónico les presta la máxima atención, trabaja en el diseño y los efectos, elige las soluciones de color perfectas para generar clics...

Pero cuando se trata de lectores de pantalla y accesibilidad para personas ciegas, lo único importante aquí es el texto. Haz que sea lo suficientemente atractivo para completar su misión: obliga a los suscriptores a hacer clic en el botón.

Así vemos el botón CTA en el email:

Pero las herramientas de lectura de pantalla no se preocupan por todos nuestros trucos de diseño y maravillosos efectos de desplazamiento. Todo lo que ve el software es el texto desnudo. Nada más. Así que asegúrese de que su texto funcione por sí solo.

Con respecto a los íconos de redes sociales, es posible que algunos suscriptores que "escuchan" los correos electrónicos de la bandeja de entrada no entiendan las abreviaturas que aplicamos a estos íconos. Así que escribe texto alternativo descriptivo para estos elementos.

Eso es todo acerca de la ceguera. Solo una nota más importante: los lectores de pantalla son ampliamente utilizados hoy en día no solo por personas que tienen trastornos visuales graves. Millones de destinatarios escuchan sus correos electrónicos en la bandeja de entrada cuando están ocupados, en la calle, en el automóvil, etc. Por lo tanto, este aspecto de la accesibilidad es aún más vital de lo que uno podría imaginar.

3. Dislexia

Las personas que sufren de dislexia tienden a confundir el orden de las letras en el texto, a pesar del nivel normal de coeficiente intelectual.

Aquí hay prácticas de accesibilidad para destinatarios disléxicos basadas en la publicación publicada por la Asociación Británica de Dislexia.

• Evite subrayar los enlaces. Como ya mencioné un poco más arriba, ponga sus enlaces en negrita en lugar de subrayarlos;
• No comience una nueva oración al final de una línea. La nueva oración debe ser una nueva línea respectivamente;
• Sin BLOQUEO DE MAYÚSCULAS si necesita resaltar/enfatizar una idea determinada; use la fuente más grande en su lugar;
• Olvídese de la alineación central, solo por el lado izquierdo de la pantalla;
• El fondo blanco puede distraer a los destinatarios disléxicos, los colores crema son más suaves y no crean dificultades;
• Finalice todas las oraciones con un punto (.), también debe usar punto y coma cuando haya viñetas en la copia del correo electrónico.

4. Sordera y audición parcial

Para las personas con discapacidad auditiva, existe un único estándar. Todos los videos incrustados en sus correos electrónicos deben estar equipados con subtítulos o descripciones de texto.

Simplemente no confíe en los subtítulos automáticos proporcionados por Youtube y otros alojamientos de video. A menudo, eh eh... por decirlo suavemente, están lejos de ser ideales. Y en algunas ocasiones incluso están al borde de la esquizofasia.

Los mejores consejos sobre accesibilidad del correo electrónico

Terminaré con nuestra revisión de las mejores prácticas de accesibilidad hoy. Como vemos, este aspecto del trabajo de los email marketers es realmente fundamental. En consecuencia, ¡nunca omita las pruebas de accesibilidad antes de hacer clic en el botón "Enviar"! Comprueba tus campañas con el mencionado simulador de daltonismo, envía el email de prueba a todos los dispositivos disponibles y escúchalas con diferentes lectores de pantalla.

Ahora recapitulemos brevemente los puntos clave de esta publicación. ¿Cómo proporcionar accesibilidad?

• Elija diferentes colores para crear un esquema de contraste para evitar confusiones;
• Escriba líneas de asunto claras y descriptivas;
• Nunca te olvides del texto alternativo, agrégalo a todas las imágenes;
• Si la animación GIF tiene un papel educativo, proporcione a los lectores una descripción detallada;
• No use diferentes idiomas en un correo electrónico porque los lectores de pantalla solo pueden funcionar con un solo idioma a la vez;
• Compruebe el significado de sus enlaces;
• Alinee el texto por el lado izquierdo;
• Cree sus boletines y correos electrónicos activados con verdadero amor. Preocúpate por todos tus suscriptores.

Sinceramente te deseo todo lo mejor. ¡Difunde cuidado y amabilidad por todas partes!