Blog |
Guides

3 Accessibility Rules to Improve Your Email Communication

8/2/2024

‍15% of your subscriber base cannot read your emails.

Just as you read it, it doesn't matter how impressive and thoughtful the design of your email is, that you have aligned it 100% with your brand guide, or that it has passed through the quality filter of your best art director.

‍Do you sendall your emails 100% image-based?

You have just made reading more difficult for hearing assistance tools.

‍do you usesmall text because it is more elegant and aesthetically pleasing?

Older adults will have more difficulty reading blocks of text and will miss your communication.

As Cap says, I could go on with this list all day.

Luckily, the Email Geeks at Orange Digital work hard to find and enforce Accessibility best practices that ensure that 100% of your subscribers can read your communication, in the best possible way no matter what email client they receive it in, or what tool they use to read it.

What is the situation in Mexico?

15% of the world's population has a disability. Of these, according to INEGI, in Mexico 2 million 237 thousand people have a visual impairment. Add to this the fact that in Mexico and Latin America we have a very large gap in the management of best email practices, and neither clients nor designers are willing to invest in adjusting their communication, and things get even more complicated. 

Most of the emails I receive every week in my inbox are 100% image-based, and when I open them in Outlook, surprise! They arrive with image blocking. Just look at this beauty:

How image-based emails look like when they arrive in the subscriber's inbox in Outlook. This email client activates a preemptive image blocker

 

In addition, nowadays we can ask Alexa to read emails to us when we are driving or while we run the first 5k of the day, the Outlook app for iOs already allows reading aloud the emails that arrive in your inbox. Sounds great right? Well, it easily becomes a nightmare if your email is not prepared for it. Having alternative texts in the images and using semantic code in the text blocks is vital for these current tools to do their job properly.

3 simple accessibility rules to improve email communication

Surprising as it may seem, making sure your email is readable for all your users is easier than it seems. I'm going to tell you 3 basic rules so that from now on, all your emails have a chance to be read.

1. Use semantic code in HTML

Un elemento <span> y una imagen haciéndose pasar por un párrafo

Emails are based on HTML and CSS code, just like websites. You could say they are first cousins. And you may not be that familiar with the coding language, but stay with me as I tell you about it with an analogy.

Remember that scene in the Simpsons where Mr. Burns wants to hire Steven Spielberg, but instead hires his Mexican equivalent?

Well, something similar happens here, we are using elements that are visually similar, but behind the scenes they work completely different.

Pasa lo mismo en el código para escribir títulos (<h1>), subtítulos (<h2>, <h3>) y párrafos (<p>).

Al escribir código, o usar herramientas como el editor visual de Salesforce Marketing Cloud, es muy fácil que el código se salga de control, y terminemos utilizando elementos que no son apropiados para ello, como utilizar <span> para escribir párrafos y saltos de línea (<br>) para cambiar de un párrafo a otro.

Example of semantic code, by following these rules, we improve the accessibility of our emails.

Visual assistance tools depend on well-written code to provide a good experience for your subscribers. So, the next time you are designing an email, think about these specifications.

2. Maintain a balance between the use of images and code for text and buttons.

Remember the example at the beginning of the note where all the images appeared blocked?

It still haunts me in my worst nightmares. Designing and laying out your emails is an art that requires balance.

To achieve this balance, follow these two tips:

  • If you are going to add an element with text, do it with code (using semantic code)
  • If you are going to load an image that has text, separate both elements and use code for text

The number of each percentage is not as important as aligning to best practices. Remember: If it's text, write it in code.

Using live text, or text made with code, has many benefits:

  • Visible even with Outlook image blocking, helping users understand the communication at a glance
  • Appear in searches from your subscribers' inboxes
  • Text is responsive and can be made larger on mobile devices

The only benefit of creating image-based emails is that they will look the way the brand guide expects them to look, but this has negative consequences:

  • Text within images is not responsive and does not adjust to different device sizes
  • Users with reading difficulties will want to zoom in on images, and this can be difficult to achieve.
  • Decrease the % of deliverability of your mailings
  • Message will be lost with image blocking

If none of this sounds appealing to you, remember that the security mechanisms that Inbox providers such as Gmail and Outlook have in place take these best practices into consideration when deciding whether to allow emails to pass through to users' inboxes.

3. Describe your images with alternative text

Having a descriptive for your images is essential, every image that is uploaded in an email must contain the alt-txt attribute, which helps support tools to describe their content to subscribers.

Each image is part of the email storytelling, in combination with the text. The description of these images must contemplate the context of the message you want to communicate.

In my very personal point of view, the alternative text should be written as part of the copy structure of each email.

Think about it for a second, if the image lock is activated, what is left is the live text written in the code plus the alternative text.

That's also the way it's experienced by people who are visually impaired or use software like Alexa or Siri to read emails to them.

If your image is decorative, i.e. it is not a main communication element, the best thing to do is to leave the alt attribute empty. It should be present in the code to improve your accessibility score, but it should not have anything in it.

This way when readers pass by it, they will not read it or announce the image as an image.

Conclusion

Small changes generate big results.

Follow these 3 accessibility rules in the next emails you send and I assure you that your subscribers will be grateful. 

In 3 steps you increased your deliverability, optimized the visualization of your communication and helped support tools better understand how to read your mailings.

El Cap would be proud of us.  

I'd love to hear how you did after making these adjustments to your campaigns, tell me more in the comments, see you soon!

Ro Santander
8x Salesforce Certified | Marketing Champion

RECENT ENTRIES

Guides

Getting Started with Salesforce Data Cloud: A Guide for Businesses

Find out how to start using Salesforce Data Cloud to power your business with data analytics, marketing automation and personalization. We tell you how it works, what features it includes, and what benefits it can bring to your business.
Guides

Data Cloud: What is it and what is it for?

Discover Salesforce Data Cloud, a comprehensive solution to efficiently manage and analyze data. Leverage its powerful capabilities to personalize the customer experience and improve your marketing strategies. Join our webinar "Data Cloud 101: Discover the Power of Real-Time Data" on February 29th at 12 pm CDMX. Register now and take your knowledge to the next level.
Guides

3 Accessibility Rules to Improve Your Email Communication

On this occasion, Ro, our Marketing Champion, will share his experience to help you discover how to improve your email communication by applying these 4 rules of accessibility. Optimize your digital communication and make every email count!