October 3, 2021

Is your HTML email translatable?

I've lived in 3 countries so far. And in all 3 countries I've encountered groups of people who cannot speak or read the local (or the most commonly-used) language.

Between new international students, foreign workers, immigrants and refugees there are many people who won't understand the content you have on your website, or the messages you send them via email.

I once was a new international student in Australia and understood very little English. Like many other international students at the time, I carried a portable translation device. Luckily now if you can connect to the internet, you can access a lot better translation services (e.g. Google Translate, Yandex Translate) for free! And you have the convenience of in-browser and in-email translations so you don't have to keep copy-pasting every bit of text you don't understand.

Is translatability an accessibility concern?

Absolutely! And translation software is one type of assistive technology. Making your HTML accessible to as many people (disabled or not) as possible should be your goal.

While it is not reasonable to translate and localise your emails for all languages or expect to know the actual preferred language for all your audience, it is reasonable for your audience to expect accessible emails from you!

What makes your HTML email untranslatable?

In the email industry some practices are favoured (despite accessibility concerns) in order to render emails in a certain way.

Text on images

Text on images has a number of accessibility concerns and translatability is one of them.

Gmail's built-in translator (Google Translate) translates the alt text of images, but the translated version is not visible. An average user will not be able to access the translated version.

Outlook's first-party Translator add-in does not translate the alt text of images at all.

Preventing auto-linking

Another common practice in the email industry is to break words/phrases that trigger email clients to auto-link them with special characters like the "zero width no-break space"  and the "zero width non-joiner" ‌:

<span>23 September</span>
<span>23 Se&#xfeff;pte&#xfeff;mber</span>
<span>23 Se&#x200c;pte&#x200c;mber</span>

In Gmail, only the first <span> is correctly translated. In Outlook (using the first-party Translator add-in), only the last <span> is not correctly translated.

VML

Given Outlook Windows still uses Microsoft Word to render HTML emails in 2021, it can still render VML shapes. Outlook's own first-party Translator add-in does not translate text inside VML shapes. So that's another accessibility issue with VML shapes.