Email HTML y Accesibilidad
Disclaimer: Este artículo fue escrito por Jason Rodriguez para la web CSS-Tricks, yo simplemente me tomé el atrevimiento de traducirlo como una forma de retribuír a todo lo que aprendo con ellos. El artículo original aquí.
Amas los email HTML, ¿verdad?
Como desarrollador, probablemente no… pero los suscriptores absolutamente lo hacen. Se los devoran, los consumen en todos los dispositivos conocidos por el hombre, y generan muchísimos ingresos para las empresas que toman en serio el email marketing.
Pero la mayoría de los desarrolladores web encargados de crear emails HTML simplemente quieren sacárselos de encima lo más rápido posible y pasar a tareas más interesantes. A pesar del valor perenne del email para los suscriptores, los plazos ajustados y el odio general al trabajo hacen que las cosas se queden en el camino; y, al igual que en el mundo web, una de las primeras cosas que debe tenerse en cuenta en el email es la accesibilidad.
Creo que todos estamos de acuerdo en que la accesibilidad es un tema vital. Desafortunadamente, se ignora en el mundo del email marketing incluso más que en la web.
Sin embargo, la accesibilidad en el email no debe consumir mucho tiempo. Existen algunas prácticas simples que puedes implementar en tus propias campañas que harán que tus emails sean más accesibles y que tus suscriptores sean aún más felices.
¿Tablas accesibles?
Una de las principales razones de que los desarrolladores web odien crear emails es que aún estamos atascados en el uso de tablas para crear el diseño. Aunque hay formas diferentes de usar tablas HTML, la mayoría de los emails aún confían en ellos para garantizar que los mismos se vean bien en Microsoft Outlook, quien no es compatible con un posicionamiento CSS tradicional, y menos aún con nuevas técnicas de diseño como ser CSS Grid (aunque también es posible aplicarlo en el email).
Pero las tablas HTML presentan un obstáculo para los usuarios que confían en los lectores de pantalla para ver su email. Esto se ve claramente cuando escucha el resultado de un lector de pantalla que recorre la típica campaña de email HTML. Mark Robbins de Rebel publicó un excelente ejemplo de este comportamiento tiempo atrás.
El lector de pantalla hace su trabajo: ve una tabla, asume que contiene datos tabulados y la lee adecuadamente.
Sin embargo, dado que usamos tablas para propósitos estructurales solamente, necesitamos que los lectores de pantalla ignoren esas tablas. Aquí es donde el rol ARIA puede sernos de ayuda. Aplicando el atributo role="presentation” a una tabla, podemos decirle al lector de pantalla que salte ese elemento y vaya directo al contenido.
Con un simple agregado, nuestros emails son mucho más accesibles. Tengan en cuenta que las tablas anidadas no heredan este comportamiento, por lo cual debes aplicar role=”presentation” a cada tabla individualmente. Crear un snippet o aplicar esto dentro de tu email boilerplate es una buena forma de asegurar accesibilidad sin tener que siquiera pensarlo.
Fuera de la imagen y en el código
Una práctica común en email marketing es usar imágenes para todo en el email: gráficos, ilustraciones, links y botones. Aunque esto puede ser eficiente (copiarlos, cortarlos y enviarlos en el momento), es otro gran problema para los suscriptores que confían en sus lectores de pantalla. El típico email basado en imágenes tiene una gran cantidad de información que no puede ser analizada por una máquina. Además, muchos clientes de email desactivan las imágenes por defecto. ¿Alguna vez has visto algo como esto?
Queremos evitar o mejorar situaciones donde el contenido no puede ser visto por los usuarios o donde el contenido no puede ser leído por un lector de pantalla. Hay dos maneras de hacer esto.
La primera es confiar menos en las imágenes y más en el HTML para transmitir tu mensaje. Quita el contenido de las imágenes y ponlo en un email como texto real.
El texto HTML no es susceptible al bloqueo de imágenes de los clientes de email, así que siempre se mostrará. Además, la mayoría de las copias que normalmente se encuentran dentro de un email se pueden convertir a texto HTML. Puedes darle estilo a ese texto como quieras, incluso usando tipografías web, y tu contenido puede ser visto por los usuarios y comprendido por los lectores de pantalla.
Esto es especialmente importante cuando el email viene con links y botones. Muchos diseñadores delegarán en las imágenes la función de botones, dado que pueden diseñarlos como lo deseen. Sin embargo, esos botones basados en imágenes son víctimas del mismo bloqueo de imágenes de los clientes de email. Usando HTML, CSS y en algunos casos el lenguaje propietario de Microsoft, VML, puedes crear botones basados en código que se mostrarán en todos lados y encajarán en tu diseño.
La segunda manera es confiar en el texto alternativo para las imágenes. Al agregar el atributo alt, podemos describir el contenido de las imágenes para los lectores de pantalla, tal así que los usuarios tengan un poco de contexto y una mejor comprensión del email.
Las mismas reglas que se aplican en la web, lo hacen en el email:
1. Todas las imágenes deben tener un atributo alt
2. El texto alternativo debe presentar el contenido y la función de la imagen
3. El texto alternativo nunca debe ser redundante
4. El texto alternativo depende en gran medida del contexto proporcionado por el contenido que rodea a la imagen
5. Las imágenes decorativas deben usar el atributo altvacío.
Un simple ejemplo de texto alternativo en el email sería algo así como una venta minorista.
Además de hacer que nuestros emails sean más accesibles, podemos personalizar el texto alternativo para que se ajuste mejor con el resto del diseño cuando las imágenes estén deshabilitadas. Usando cosas como color, Font-family, Font-size, Font-weight, y line-height podemos aplicar estilos a texto alternativo en gran medida de la misma manera que lo haría con cualquier otro texto en el email. Combinados con algo como background-color en la imagen, esos estilos hacen posible tener emails altamente optimizados y accesibles para cuando las imágenes estén deshabilitadas.
Todo es semántica
A pesar de lo que algunos creadores de email marketing y desarrolladores te digan, la semántica en el email sí importa. No sólo provee formas accesibles para navegar por el email, sino que también provee estilos alternativos que ayudan a mantener la jerarquía de emails en el desafortunado caso de que el CSS no cargue o no sea compatible.
Solía pasar que todo el estilo del texto se hacía en las celdas de la tabla, y cualquier copia era un descendiente directo de esa celda de la tabla.
Los desarrolladores de email evitaban el uso de elementos semánticos como encabezados y párrafos porque los clientes de email (correctamente) mostraban su propio estilo predeterminado de esos elementos, lo que a veces provocaba diseños rotos o no deseados. No sé si fue pura pereza u otra cosa, pero muy pocos desarrolladores usaban elementos semánticos con simples anulaciones para mantener sus diseños accesibles y consistentes entre los clientes.
Agregando la propiedad margin en los elementos semánticos de bloque y confiando en la herencia de estilo de la celda, podía crear emails más accesibles que se muestren correctamente en casi todas partes.
No tienes que detenerte en simples encabezados o párrafos tampoco. Puedes usar elementos de seccionamiento como main, header, footer, article y más para proporcionar valor semántico adicional a tus emails. Sin embargo, te advierto que los uses sobre tu estructura existente basada en tablas. No todos los clientes de email soportan estilos que se apliquen a esos elementos, por lo que algo así es un buen enfoque:
Diseñando para suscriptores
La última técnica que deseo analizar, aunque no es la última técnica disponible para nosotros, es adherirnos a los principios de diseño comprobados en nuestras campañas para mantenerlos accesibles.
Accesibilidad no trata sólo de lectores de pantalla. Los suscriptores pueden tener discapacidades visuales, como también físicas o cognitivas, que hagan muy difícil leer los emails, especialmente cuando el diseño no ha sido actualizado en años. Confiando en los principios de diseño como jerarquía, espacio, patrones, proximidad, tamaño de tipografía y contraste, podemos asegurar que un amplio espectro de suscriptores pueda entender y disfrutar nuestras campañas de email.
Esto es especialmente evidente cuando se trata de ver los emails desde dispositivos móviles. Si no tienes en cuenta la vista móvil desde el principio, o no usas un diseño de email responsive, entonces tu campaña de email basada en el escritorio puede ser difícil de usar cuando se reduzca en la mayoría de los clientes de mail de los móviles.
Simplemente viendo tus diseños con el móvil y teniendo en cuenta a los usuarios con discapacidades puede ser de gran ayuda para mantener tus emails accesibles. Una buena base es usar una tipografía más grande que sea legible para una amplia variedad de usuarios, combinado con estilos de encabezado adecuados y una jerarquía que sea fácil de escanear. Si a esto le agregamos patrones repetibles dentro de tus emails que ayuden a escanearlos y entenderlos, junto con suficiente espacio en blanco y colores que contrasten apropiadamente, tus emails serán aún mejores.
Te invito a usar herramientas como Chrome Lighthouse y Accessible-Colors.com para verificar el acceso a sus diseños de email HTML. Es todo HTML y CSS, por lo que las herramientas que funcionan en la web también funcionan en el email. ¡Usalos!.
¿Tienes tus propios tips?
Aunque mucho del desarrollo de email está atascado en el pasado, eso no significa que no podamos modernizar nuestras campañas junto con nuestros sitios web. Muchos de estos consejos se pueden incluir directamente en tu email boilerplate o snippet, lo que te permite crear mails HTML más accesibles sin pensarlo demasiado.
Al mismo tiempo, no dejes que eso te impida poner ese pensamiento extra en tus emails. Este artículo simplemente raspa la superficie de lo que es posible en el desarrollo de email HTML. Me encantaría conocer tus consejos para crear emails accesibles aquí abajo en los comentarios.
