Jay Oram
Head of Dev
18 May 2023
Today the Email Markup Consortium shared their Email Accessibility Report - including over 303,847 emails which were tested by Parcel’s accessibility checker. The report shows a staggering 99.9% of emails don’t meet the requirements to be 100% accessible. We want to help you get your emails into the top 0.01% of accessible emails and follow accessibility best practices. So we have put together a handy guide for how you can meet all the accessibility requirements as set out by the Email Markup Consortium.
Language Attributes
We were surprised to see such a large number of emails not meeting this requirement, and if you can implement these code changes, you can tick off 2 of the top 10 most common accessibility issues.
In the above code you can see the three places you need to set the language of your email to meet the requirements:
1. lang attribute on the <html> element
Adding the language attribute here helps email clients know what language your email is composed in. As this element isn’t kept in all email clients, we need to repeat it in a few places.
2. xml:lang attribute on the <body> element
Outlook Windows Desktop used the xml:lang attribute to set the language, and can be included on the body element.
3. lang attribute on a wrapping div containing your email content.
Lastly we have added a div wrapping all of the content inside our email. Webmail clients will strip the <html> element so to ensure we still stipulate a language we include it here in our wrapper.
We use the wrapping element a few times to meet accessibility requirements and it is something we include in all of our email builds as standard now. If you use multiple languages or just have one short snippet in another language you can set the language on a span or div tag:
<span lang=”fr”>Bonjour!</span>
Setting direction
Direction of text is an important attribute to many languages and by adding the dir attribute on our wrapping container, you will ensure the email is rendered correctly:
As mentioned in the report - in the code, set the direction to either dir=”ltr” (left to right) or dir=”rtl” (right to left) - but as a fallback you can set it to dir=”auto”.
Role on tables
Something which has been known about for a while - using tables for layout is something we need to stipulate for one email client, Outlook Windows Desktop. So everyone has to include at least one table in their code.
The default way a table is read out or described by assistive technology is as a ‘data table’ - it may read a table as:
“Row 1, Cell 1, title of the table, Row 1, Cell 2, table heading”
Which is not how we use most tables, normally we use them for layout purposes. To make sure they are described accurately - all tables should have role=”presentation” or role=”none” set on them (unless they are a data table!!)
Semantic code and atleast a H1
To meet the EMC requirements, an email should have a <h1> set.
A <h1> element is the main heading of the email, it could be the first title, it could be wrapped around your logo, but it should be the starting point for someone navigating your email.
We would also recommend using semantic html throughout your code, using heading tags to denote sections, along with setting one <h1>, content should be broken down into h2, h3, h4 etc.
Paragraphs of text should be in a <p> element and not just set inside a <td>. Similarly list items should be coded using <ul>, <ol> and <li> rather than using a table set up.
Alt text
All images should have an alt attribute.
<img src="image.png" alt="">
The alt text should be included not only for assistive technology, in some instances your email will be seen without images, due to a slow internet connection, images being blocked by email clients or users preference - alt text should be set as standard.
If an image is purely decorative, such as a divider - an empty alt tag should still be included, as the worst case, an email client could read out the URL of the image src attribute - “ h t t p s : / / …” you can see how that may not be the best experience!
The alt attribute isn’t only for image tags - if you use Vector Markup Language (VML) in your code to add rounded corners to buttons, or include background images for Outlook Windows for example, an alt tag should be included for these as well, on each shape or element or the wrapping group element.
Links
Links need to have discernible text and link text should be descriptive. Making link text descriptive can be subjective - but the easiest way to think about it, is to ensure if your link text was read alone with no other context, would it make sense?
Not very descriptive:
‘Click here’
‘Read more’
‘More info’
Adding more context and making it descriptive:
‘Visit our blog’
‘Click here to download the latest report’
‘More information about email code’
Discernible text - is making sure that a link has text inside it, including linking images. When wrapping a link around an image, the image should have an alt attribute. You can also add aria-label or title to the anchor link:
<!-- title attribute --> <a href="actionrocket.co" title="Visit the ActionRocket website"> <img src="actionrocketlogo.png" alt="ActionRocket logo"> </a>
<!-- aria-label attribute --> <a href="actionrocket.co" aria-label="Visit the ActionRocket website"> <img src="actionrocketlogo.png" alt="ActionRocket logo"> </a>
The support for these attributes is inconsistent across email clients - but the alt attribute is supported across all email clients, so we would recommend ensuring this is always set on a linked image.
Title element
All HTML emails should have the title element, and it should contain a descriptive title of the document. This could be the brand name as a fallback - but if possible, it could be updated per email, possibly with the subject line (if that is descriptive) or written specifically for the email.
At ActionRocket we can help you to understand more about accessibility and how it affects your email audience. Our aim is to get every brand to be creating emails with accessibility in mind. If you think your emails could be more accessible we’d love to help, get in touch with us at hello@actionrocket.co.