Accessibility Report July 2022

Last modified: 5 August 2022

This is our first accessibility report. We intend to publish one on a regular basis to report on the state of accessibility in the email industry. We hope this will help to encourage people to fix accessibility issues so we will see a trend in improvement over time. As you’ll see from the results we have a long way to go.

Result

99.9% out of 35,604 HTML emails tested contain accessibility issues categorized as “Serious” or “Critical”.

Sponsor

The data

The data was sourced by the Email Markup Consortium Data Collection project between 16th May 2022 and 22 July 2022. We collected 35,604 emails from multiple industries in multiple languages. We have attempted to diversify our data set as much as possible. Around 50% of the emails we analyzed were written in languages other than English.

If you would like to add to and help expand our dataset or find out more about it, you can read more about our data collection project.

Testing methodology

The testing is performed via Parcel accessibility checker. This is a tool built specifically for email accessibility tests. Learn more about the tests and what they cover by reading the Parcel accessibility-checker documentation.

We’d like to give huge thanks to the team at Parcel.io for all the help with collecting the data and running the tests. The accessibility checker is available on the free Community plan at Parcel, so if you want to test your emails on the same criteria that we use you can do so very easily, and add it into your regular email production workflow.

Results

Issues severity

Accessibility issues are categorized into 4 categories depending on how serious they are. These are defined by Deque Axe as:

• Mild - Considered to be a nuisance or an annoyance bug. Prioritize fixing if the fix only takes a few minutes and the developer is working on the same screen/feature at the same time, otherwise the issue should not be prioritized. Will still get in the way of compliance if not fixed. Should be very infrequent.
• Moderate - Results in some barriers for people with disabilities, but will not prevent them from accessing fundamental features or content. Prioritize fixing in this release, if there are no higher-priority issues. Will get in the way of compliance if not fixed. Should be fairly common.
• Serious - Results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority. Should be very common.
• Critical - Results in blocked content for people with disabilities, and will definitely prevent them from accessing fundamental features or content. This type of issue puts your organization at risk. Prioritize fixing as soon as possible, within the week if possible. Remediation should be a top priority. Should be infrequent.

In our test we looked to find the highest category of issue recorded in each email:

From this we can see that 99.9% of emails tested contain accessibility issues categorized as “Serious” or “Critical”. These are the highest categories and fixing any of these issues should be considered high priority. We knew things were bad but this is much worse than we were expecting.

Out of all the emails tested there were only 11 that passed without issue, and those were from just 3 senders.

So congratulations to

• Email On Acid (1 email)
• Blocks Edit (2 emails)
• Basta! (8 emails)

All three of these brands are setting a great example of what can be done.

After some additional manual testing on these campaigns, the Email On Acid email came out on top. So if you’re looking for an example of what to aim for, you can view the most accessible email from our test.

Top 10 most common accessibility issues in email

(1) Serious: Content inside the body should be wrapped in a lang attribute

Issue present in 86.1% of emails tested.

Why it’s needed:

This defines the language for the email, it can help with translation tools but the main reason it’s needed is for tools like screen readers. If a screen reader is set to the wrong language it can change the pronunciation of words which in turn could make it completely unusable.

How to fix this:

This can be fixed by adding a <div> as the first child of the <body> element with a lang="" attribute set on it with the appropriate language. We need this set inside the <body> and on the <html> tag as some email clients will strip parts of the code before displaying it.

When setting a lang="" attribute it’s always good to set a dir="" attribute too, to define the direction of the language. Learn more about lang attributes

(2) Moderate: Page should contain a level-one heading

Issue present in 85.7% of emails tested.

Why it’s needed:

According to the 2021 WebAIM screen reader user survey 67.7% use headings as their primary way of finding information. Having an <h1> in the email means they can quickly and easily find the email in the page and the information inside it.

However not all emails require headings. For instance, a very simple email with no structure to the content (e.g. just a couple of paragraphs of text) does not require any headings.

How to fix this:

Add an <h1> tag around the main heading of the email. You should only use one <h1> after that you can use <h2> headings as sub headings under that main heading, and <h3> as a sub heading of the <h2> all the way down to <h6>.

(3) Serious: <html> element must have a lang attribute

Issue present in 78.8% of emails tested.

Why it’s needed:

This defines the language for the email, it can help with translation tools but the main reason it’s needed is for tools like screen readers. If a screen reader is set to the wrong language it can change the pronunciation of words which in turn could make it completely unusable.

How to fix this:

This can be fixed by adding a lang="" attribute to the <html> tag. This is in addition to the Content inside the body should be wrapped in a lang attribute issue mentioned above.

When setting a lang="" attribute it’s always good to set a dir="" attribute too, to define the direction of the language. Learn more about lang attributes.

(4) Serious: Tables used for formatting should have the role attribute set to presentation or none

Issue present in 78.4% of emails tested.

Why it’s needed:

<table> elements are designed to be used for tabular data, not for laying out content. When a screen reader encounters a table it will read it as tabular data, looking at the context of the cell within the rows and columns of the table.

How to fix this:

If you are using table elements for layout, then add role="presentation" or role="none" to each layout table used. However if you are displaying a table of data then you should not use this, but be sure to markup the headings correctly.

(5) Serious: Links must have discernible text

Issue present in 61.6% of emails tested.

Why it’s needed:

Link text tells the user where the link will direct them, without any text they won’t know what the link is for. This is particularly bad for screen reader users.

How to fix this:

Add some text inside the <a> tag. This issue often comes up when an image has a link around it but no alt text, in that case adding an alt="" attribute with appropriate text will fix the issue.

(6) Serious: Documents must have <title> element to aid in navigation

Issue present in 45% of emails tested.

Why it’s needed:

The title will show if the email is viewed as a webpage, this shows in the browser tab helping users find it amongst other tabs. A screen reader will also announce the title when the user navigates to that tab.

How to fix this:

Add a <title> element with some appropriate text inside the <head>.

(7) Critical: Images must have alternate text

Issue present in 44.5% of emails tested.

Why it’s needed:

Alt text is used to describe an image to someone using a screen reader. Images are often added to email to help convey a message to the user, so we need that message to pass across to all users.

How to fix this:

Add an alt="" attribute to the<img> element with appropriate text. If the image is purely there for decoration and not adding to the message or meaning of the content, then you should still include an alt="" attribute, but you can leave it blank.

(8) Moderate: Link text should be descriptive.

Issue present in 15.8% of emails tested.

Why it’s needed:

Link text tells the user where the link will take them so a good description makes them more informed. Also screen readers have a feature that shows a list of all the links in a page, this only displays the link text and none of the text around it which might be used to add context.

How to fix this:

Avoid generic text like “click here” or “find out more”. Use text that identifies the purpose of the link without needing additional context. Learn more about link text

(9) Critical: Zooming and scaling should not be disabled

Issue present in 9.3% of emails tested.

Why it’s needed:

Even when you’re using good sized text and clear layout there are still many cases where people will need to zoom in to see things more clearly.

How to fix this:

If you are using a <meta name="viewport"> make sure the user-scalable value is set to 1 or yes and the maximum-scale is set to at least 5.

You can also just remove these setting as the default values are user-scalable=yes, maximum-scale=10

(10) Moderate: Email should have exactly one h1 tag (but has more than one).

Issue present in 9.1% of emails tested.

Why it’s needed:

We’ve already mentioned why an <h1> is needed. But adding more than one can be very confusing for users and they get lost trying to navigate the email.

How to fix this:

Decide on which is the main heading, usually this is the first one, leave that as <h1> and move all the others down to <h2> or lower.

Conclusions

From looking at these results, it’s clear we still have a very long way to go. There are a large number of issues, however these are repeated a lot so there is not that much to fix. If everyone were to fix just the top 5 issues listed here that would turn these results around. And most of these fixes only require very small changes.

These results are based on the analysis of 35,604 emails collected over the last 2 months. In terms of the email industry as a whole this is a very small number, however the results do match a previous test done by the Parcel team.