Accesibilidad en el marketing por correo electrónico: 7 trucos simples para hacer que su código sea más accesible
Publicado: 2019-04-16La accesibilidad se está convirtiendo rápidamente en un pilar del marketing por correo electrónico tanto como en la experiencia del usuario y el diseño. Cada vez más marcas se aseguran de que todos los suscriptores puedan disfrutar de sus campañas de correo electrónico , ya sea que tengan discapacidades físicas, visuales o cognitivas, o incluso si simplemente no pueden ver imágenes en sus correos electrónicos debido a un entorno corporativo.
Como especialistas en marketing por correo electrónico, todos nos esforzamos por enviar excelentes correos electrónicos a las bandejas de entrada de nuestros suscriptores. Realizamos pruebas de spam y pruebas de correo electrónico para garantizar que nuestro diseño se reproduzca perfectamente en todos los dispositivos y clientes de correo electrónico. Pero a veces, nos olvidamos de establecer etiquetas ALT para nuestras imágenes, usamos una combinación de colores que es difícil de leer o no optimizamos nuestros correos electrónicos para lectores de pantalla, y eso aleja a algunos de nuestros suscriptores.
Si recién está comenzando a hacer que su código de correo electrónico sea más accesible, las cosas pueden ser abrumadoras. Pero hay algunos trucos simples que puede implementar fácilmente y que tienen un gran impacto en la accesibilidad del correo electrónico.
A continuación, le indicamos cómo verificar su correo electrónico para verificar su accesibilidad para todos sus suscriptores, sección por sección.
 | ¿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 → |
Su lista de verificación de accesibilidad
1. Agregue un código de idioma a su <HTML>
No todos sus suscriptores leerán su correo electrónico en sus computadoras portátiles o teléfonos; algunos usarán lectores de pantalla para acceder a su correo electrónico. Dado que el contenido de su correo electrónico se leerá en voz alta, debe estar en el idioma correcto para que las pronunciaciones sean correctas; no querrá que su correo electrónico escrito en francés se pronuncie en inglés americano, ¿verdad?
Para evitar que eso suceda, tendrá que informar a los lectores de pantalla en qué idioma está escrito su correo electrónico. Si no hay un código de idioma especificado en sus correos electrónicos, los lectores de pantalla no pueden pronunciar la copia correctamente y su elocuente correo electrónico puede aparecer. suena completamente mal.
Por eso es clave comprobar su <HTML> en busca de un código de idioma; es un simple fragmento de código que especifica el idioma de su correo electrónico. Si aún no está en su código, agregue lang = "xx"; reemplace xx con el código de idioma apropiado para su correo electrónico. Aquí puede encontrar una lista de todos los códigos de idiomas y localidades posibles, que le permite tener en cuenta los diferentes acentos, como una diferenciación entre el inglés británico y el estadounidense .
Hay algunos casos especiales a considerar:
- Si está utilizando XML en su etiqueta <HTML>, también deberá agregar xml: lang = "xx" .
- Si incluye la corrección de 120 ppp de Outlook en su código de correo electrónico, necesitará esta solución para especificar un idioma. Así es como se ve nuestro código con esta corrección:
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
Consejo profesional: es posible completar el código de idioma dinámicamente si tiene la localización configurada dentro de su ESP.
2. Incluya siempre etiquetas ALT para sus imágenes
Es importante tener en cuenta que es posible que las imágenes de sus correos electrónicos no siempre sean visibles para sus suscriptores. Tal vez tengan sus imágenes apagadas, o tengan una mala conexión, o estén usando un lector de pantalla, y si incluyes mucha información importante en tus imágenes, esos mensajes se perderán. Ahí es donde entra el texto ALT. Puede configurar el texto que sea visible para sus suscriptores (o leído por su lector de pantalla) para que sigan recibiendo los mismos mensajes que las personas que pueden ver sus imágenes.
Siempre que tenga una etiqueta <IMG> en su código de correo electrónico, asegúrese de configurar la etiqueta ALT. Si ya ha llenado las etiquetas ALT, verifique dos veces para asegurarse de que el texto coincida con el texto de la imagen. Si tiene etiquetas ALT vacías, asegúrese de que no haya ningún texto en la imagen que deba completarse para que lo vea un lector de pantalla. Si no hay etiquetas ALT en sus imágenes y no hay texto en la imagen en sí, o no hay texto necesario para el significado del correo electrónico, asegúrese de agregar una etiqueta ALT vacía: alt = “” . Si no incluye esto, los lectores de pantalla leerán la URL de la imagen, ¡y nadie quiere que se les lea una URL larga!
Una vez que haya configurado todas sus etiquetas ALT (vacías o no) para las imágenes de su correo electrónico, agregue un estilo de fuente en la etiqueta <IMG> para el texto ALT con estilo . Este estilo le permite hacer más elegante su texto ALT y le permite alterar la apariencia de la fuente, el color, el tamaño, el estilo y el peso.
3. Incluya el atributo role = "presentación" en todos los elementos <TABLE>
La mayoría de los especialistas en marketing por correo electrónico confían en las tablas para estructurar el diseño de su correo electrónico, pero estas pueden causar problemas graves a los lectores de pantalla. Si un lector de pantalla identifica una tabla en el código de su correo electrónico, se leerá en voz alta como una. Literalmente, podría decirle cuántas filas y columnas hay, indicándole la posición y el contenido de cada columna, lo que hace que sea imposible comprender su mensaje.
Por eso es clave decirle al lector de pantalla que está utilizando la tabla solo con fines de diseño. Puede hacerlo agregando role = "presentación" a cada tabla en su correo electrónico. Esta función le dice a los lectores de pantalla que eliminen cualquier significado semántico de las tablas, por lo que en lugar de leer los números de fila y columna, se centra en el contenido.
Veamos este encabezado de correo electrónico realmente simple de uno de nuestros propios correos electrónicos:
Antes de optimizar la accesibilidad, nuestro código se veía así:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>¿Notó que le faltan atributos ALT y que las tablas no están configuradas para rol = ”presentación” ?
Esos pequeños descuidos tienen un gran impacto en la accesibilidad. Así es como un lector de pantalla interpreta el código anterior:
Lector de pantalla: encabezado de correo electrónico no accesible
Y aquí está el mismo código que se ha refactorizado agregando el atributo ALT = ”” y el rol = ”presentación” a las etiquetas <TABLE> para que sea fácil de leer:
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Lector de pantalla: encabezado de correo electrónico accesible
Como puede oír, ¡hay una gran diferencia!
4. Utilice elementos semánticos para estructurar su contenido.
Los elementos semánticos facilitan resaltar la jerarquía de contenido, mostrando a los suscriptores (y lectores de pantalla) qué es un título y qué es un texto de párrafo. 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 más fácilmente.
Cuando revise su copia dos veces, asegúrese de que cualquier copia digna de un título esté incluida dentro de una etiqueta <H> : <H1> , <H2> , <H3> , etc. Del mismo modo, asegúrese de que cualquier texto del cuerpo esté alojado dentro de una etiqueta <P> . Al revisar su correo electrónico, los lectores de pantalla ponen énfasis en encabezados específicos, y la configuración de estas etiquetas <H> y <P> hará que su correo electrónico sea más fácil de navegar.
5. Alinee su copia a la izquierda, si es posible
Cuando se trata del texto del cuerpo, puede ser tentador alinearlo en el centro. Sin embargo, cuando se trata de accesibilidad, ¡ esto es un gran error !
Cuando centra su texto, el borde de inicio cambia para cada línea, lo que obliga a sus suscriptores a trabajar más duro para encontrar el comienzo de cada línea, y eso es un desafío para las personas con dislexia y otros problemas de lectura. Si tiene una copia de más de dos líneas, alinee a la izquierda esa copia. Esto es especialmente importante para dispositivos móviles, ya que el ancho estrecho a menudo produce más líneas de texto de las que imagina. Es posible que deba alinear el texto a la izquierda de manera receptiva en el dispositivo móvil.
6. Comprueba el contraste de tu copia.
Verifique la relación de contraste de los colores de su texto con los colores de fondo de su correo electrónico. Es posible que tenga suscriptores que tengan deficiencias de color y, si sus colores no les brindan suficiente contraste, es posible que no puedan leer su correo electrónico. Hay dos formas de comprobar la relación de contraste:
- Si puede alojar su HTML y producir una URL para usar, esta es mi forma favorita de verificar mis colores: http://www.checkmycolours.com/
- Si necesita ingresar manualmente sus códigos de color, consulte https://contrast-ratio.com/
7. Agregue efectos de desplazamiento para llamadas a la acción, vínculos e imágenes.
En Litmus, utilizamos efectos de desplazamiento en nuestras CTA, enlaces e imágenes para indicar la capacidad de hacer clic. Los efectos de desplazamiento son un elemento interactivo simple que puede hacer que sus correos electrónicos sean más atractivos y mejorar la experiencia de sus suscriptores. Aunque los efectos de desplazamiento solo son compatibles con AOL, Apple Mail, Gmail y Yahoo! Mail, son un efecto popular y vale la pena implementarlos en su código de correo electrónico. Puede atenuar una imagen, cambiar el color de su botón de CTA, agregar una pestaña emergente y más. 
Ver el correo electrónico completo en Litmus Builder →
¿Quieres más sugerencias por correo electrónico?
 | Guía definitiva para la accesibilidad del correo electrónicoEsta 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 → |
Reciba los mejores recursos, estadísticas y consejos de diseño y marketing por correo electrónico directamente en su bandeja de entrada y manténgase a la vanguardia de la innovación del correo electrónico cuando se registre en Litmus News.
Manténgase informado →