Te encantan los correos electrónicos HTML, ¿no?
Como desarrollador, probablemente no … pero suscriptores absolutamente hacer. Los devoran, los consumen en todos los dispositivos conocidos por el hombre y generan una gran cantidad de ingresos para las empresas que se toman en serio su marketing por correo electrónico.
Pero la mayoría de los desarrolladores web encargados de crear correos electrónicos HTML simplemente quieren sacarlos lo más rápido posible y pasar a tareas más interesantes. A pesar del valor perenne del correo electrónico para los suscriptores, los plazos ajustados y el desprecio general por el trabajo hacen que las cosas se queden en el camino; y, al igual que en el mundo web, una de las primeras cosas que se deben dejar de lado en el correo electrónico es la accesibilidad.
Creo que todos estamos de acuerdo en que la accesibilidad es un tema vital. Desafortunadamente, es uno que se ignora en el mundo del marketing por correo electrónico incluso más que en la web.
Sin embargo, la accesibilidad en el correo electrónico no tiene por qué consumir mucho tiempo. Hay algunas prácticas simples que puede incorporar a sus propias campañas que harán que sus correos electrónicos sean más accesibles y sus suscriptores aún más felices.
¿Mesas accesibles?
Una de las principales razones por las que los desarrolladores web odian la creación de correos electrónicos es que todavía estamos atascados en el uso de tablas para el diseño del correo electrónico. Aunque hay algunas formas diferentes de utilizar tablas HTML, la mayoría de los correos electrónicos aún dependen de ellas para asegurarse de que los correos electrónicos se vean bien en Microsoft Outlook, que no admite el posicionamiento CSS más tradicional, y mucho menos técnicas de diseño CSS más nuevas como Grid (aunque eso también es posible en el correo electrónico).
Pero las tablas HTML presentan un obstáculo para los usuarios que dependen de los lectores de pantalla para consumir sus correos electrónicos. Esto se aclara cuando escucha la salida de un lector de pantalla trabajando a través de la típica campaña de correo electrónico HTML. Mark Robbins de Rebel publicó un excelente ejemplo de este comportamiento hace un tiempo.
El lector de pantalla está haciendo su trabajo: ve una tabla, asume que contiene datos tabulares y los lee apropiadamente.
Sin embargo, dado que usamos tablas únicamente con fines estructurales, necesitamos que los lectores de pantalla ignoren esas tablas. Aquí es donde los roles de ARIA pueden ayudarnos. Aplicando el role="presentation" atributo a una tabla, podemos indicarle al lector de pantalla que omita esos elementos y se mueva directamente al contenido.
Vea Correos electrónicos accesibles a lápiz – Presentación de tablas ARIA de Jason Rodríguez (@rodriguezcommaj) en CodePen.
Con esa simple adición, nuestros correos electrónicos son mucho más accesibles. Cabe señalar que las tablas anidadas no heredan este comportamiento, por lo que tendrá que aplicar role="presentation" individualmente a cada mesa de su campaña. Crear un fragmento o incorporarlo en el texto estándar de su correo electrónico es una buena manera de garantizar la accesibilidad sin tener que pensar en ello.
Fuera de la imagen y dentro del código
Una práctica común en el marketing por correo electrónico es utilizar imágenes para todo el contenido del correo electrónico: gráficos, ilustraciones, copia, enlaces y botones. Aunque esto puede ser eficiente (cortar, cortar y enviar en su camino), es otro gran problema para los suscriptores que dependen de los lectores de pantalla. El correo electrónico típico basado en imágenes tiene mucho de información que no puede ser analizada por una máquina. Además, muchos clientes de correo electrónico también desactivan las imágenes de forma predeterminada. ¿Alguna vez has visto algo como esto?
Un ejemplo de comportamiento de bloqueo de imágenes en Microsoft Outlook.
Queremos evitar o mejorar situaciones en las que los usuarios no pueden ver el contenido o un lector de pantalla no puede leer el contenido. Hay dos maneras de hacer esto.
La primera es confiar menos en las imágenes y más en HTML para transmitir su mensaje. Extraiga una copia de sus imágenes y colóquela en su correo electrónico como texto real y en vivo.
Texto HTML frente a bloqueo de imágenes. Lyft hace esto muy bien.
El texto HTML no es susceptible al bloqueo de imágenes en los clientes de correo electrónico, por lo que siempre se mostrará. Además, la mayoría de las copias que se encuentran normalmente en un correo electrónico se pueden convertir a texto HTML. Puede diseñar ese texto como desee, incluso utilizando fuentes web, y los usuarios pueden ver su contenido y los lectores de pantalla pueden entenderlo.
Esto es especialmente importante cuando se trata de enlaces y botones en correos electrónicos. Muchos diseñadores confiarán en las imágenes para los botones, ya que pueden diseñar esos botones como quieran. Sin embargo, esos botones basados en imágenes son víctimas del mismo comportamiento de bloqueo de imágenes que cualquier otra imagen. Usando HTML, CSS y, en algunos casos, el lenguaje VML patentado de Microsoft, puede crear botones basados en código que se muestran en todas partes y aún encajan con su diseño.
Vea Correos electrónicos accesibles con lápiz: botones a prueba de balas de Jason Rodríguez (@rodriguezcommaj) en CodePen.
El segundo es confiar en texto alternativo para las imágenes. Añadiendo el alt atributo, podemos describir el contenido de las imágenes para lectores de pantalla para que los usuarios obtengan algo de contexto y una mejor comprensión del correo electrónico.
Se aplican las mismas reglas en el correo electrónico que en la web:
- Todas las imágenes deben tener un
altatributo - El texto alternativo debe presentar el contenido y la función de una imagen.
- El texto alternativo nunca debe ser redundante
- El texto alternativo se basa en gran medida en el contexto proporcionado por el contenido que rodea una imagen.
- Las imágenes decorativas deben usar un
altatributo
Un ejemplo simple de texto alternativo en un correo electrónico sería algo así como una venta minorista.
Consulte Correos electrónicos accesibles con lápiz: texto alternativo con estilo de Jason Rodriguez (@rodriguezcommaj) en CodePen.
Además de hacer que nuestros correos electrónicos sean más accesibles, podemos diseñar ese texto alternativo para que encaje mejor con el resto de nuestro diseño de correo electrónico cuando las imágenes están deshabilitadas. Usando cosas como color, font-family, font-size, font-weight, y line-height le permite diseñar texto alternativo de la misma manera que lo haría con cualquier otro texto en el correo electrónico. Combinado con algo como background-color en la imagen, estos estilos permiten tener correos electrónicos altamente optimizados y accesibles para cuando las imágenes están deshabilitadas.
El texto alternativo con estilo mantiene los correos electrónicos accesibles y de marca.
Todo es semántica
A pesar de lo que le dirán algunos desarrolladores y especialistas en marketing de correo electrónico, la semántica en el correo electrónico hacer importar. No solo proporcionan ganchos accesibles para navegar por un correo electrónico, sino que pueden proporcionar estilos alternativos que ayudan a mantener la jerarquía de los correos electrónicos en el desafortunado caso de que CSS no esté cargado o no sea compatible.
Solía ser que todos los estilos de texto se realizaban en las celdas de la tabla dentro de una campaña, y cualquier copia era un descendiente directo de esa celda de la tabla.
Consulte Correos electrónicos accesibles mediante lápiz: enfoque de texto antiguo de Jason Rodriguez (@rodriguezcommaj) en CodePen.
Los desarrolladores de correo electrónico evitarían el uso de elementos semánticos como encabezados y párrafos porque los clientes de correo electrónico (correctamente) mostraban su propio estilo predeterminado de esos elementos, lo que a veces resultaba en diseños rotos o diseños no deseados. No sé si fue pura pereza o algo más, pero muy pocos desarrolladores usarían elementos semánticos con anulaciones simples para mantener sus diseños accesibles y consistentes en todos los clientes.
Añadiendo el margin propiedad en elementos semánticos a nivel de bloque, y confiando en la herencia de estilo de la celda de la tabla, puede crear correos electrónicos más accesibles que se muestran correctamente en casi todas partes.
Consulte Correos electrónicos accesibles mediante lápiz: enfoque de texto semántico de Jason Rodríguez (@rodriguezcommaj) en CodePen.
Tampoco tiene que detenerse en títulos o párrafos simples. Puede utilizar elementos de seccionamiento como main, header, footer, article y más para proporcionar un valor semántico adicional a sus correos electrónicos. Te advierto que los uses encima de su estructura existente basada en tablas, sin embargo. No todos los clientes de correo electrónico admiten que se apliquen estilos a esos elementos, por lo que algo como esto es un buen enfoque:
Consulte Correos electrónicos accesibles mediante lápiz: artículo semántico de Jason Rodríguez (@rodriguezcommaj) en CodePen.
Diseño para suscriptores
La última técnica que quiero discutir, aunque no es la última técnica disponible para nosotros, es adherirse a principios de diseño probados y verdaderos dentro de nuestras campañas para mantenerlas accesibles.
La accesibilidad no se trata solo de lectores de pantalla. Los suscriptores pueden tener discapacidades visuales, así como discapacidades físicas o cognitivas que dificultan el consumo de correos electrónicos, especialmente cuando el diseño de un correo electrónico no se ha actualizado en años. Al confiar en principios de diseño como jerarquía, espacio, patrón, proximidad, tamaño de letra y contraste, podemos asegurarnos de que un amplio espectro de suscriptores pueda comprender y disfrutar de nuestras campañas de correo electrónico.
Esto es especialmente evidente cuando se trata de ver correos electrónicos en dispositivos móviles. Si no está tomando en cuenta la vista móvil desde el principio, o si usa un diseño de correo electrónico receptivo, entonces sus campañas de correo electrónico de escritorio primero pueden ser difíciles de usar cuando se reducen en la mayoría de los clientes de correo electrónico móvil.
Trello utiliza botones, tipos y elementos visuales de gran tamaño para mantener las cosas legibles y utilizables en todos los tamaños de dispositivos.
El simple hecho de volver a visitar sus diseños teniendo en cuenta a los usuarios móviles y discapacitados puede contribuir en gran medida a mantener sus correos electrónicos accesibles. El uso de letras más grandes que sean legibles para una amplia variedad de usuarios, combinado con estilos de encabezado adecuados y una jerarquía que sea fácil de escanear, es una excelente línea de base. Agregar patrones repetibles dentro de sus correos electrónicos que ayuden aún más a escanear y comprender, junto con mucho espacio en blanco y colores que contrasten adecuadamente, lleva sus correos electrónicos aún más lejos.
Le animo a que utilice herramientas como Chrome Lighthouse y Accessible-Colors.com para comprobar la accesibilidad de sus diseños de correo electrónico HTML. Todo es HTML y CSS, por lo que las mismas herramientas que funcionan en la web también funcionan en el correo electrónico. ¡Usalos, usalos a ellos!
¿Tiene sus propios consejos?
Aunque gran parte del desarrollo del correo electrónico está estancado en el pasado, eso no significa que no podamos modernizar nuestras campañas junto con nuestros sitios web. Muchos de estos consejos se pueden integrar directamente en su plantilla de correo electrónico o en fragmentos de código, lo que le permite crear correos electrónicos HTML más accesibles sin pensar demasiado.
Al mismo tiempo, no permita que eso le impida poner ese pensamiento adicional en sus correos electrónicos. Este artículo simplemente raspa la superficie de lo que es posible en el desarrollo de correo electrónico HTML. Me encantaría conocer sus consejos para crear correos electrónicos accesibles en los comentarios a continuación.