One Trick To Make Your HTML Emails More Accessible

Email accessibility is a growing priority for marketers — and for good reason. 

About 25% of Americans live with some form of disability, and the U.S. disabilities community controls a combined $490 billion in disposable income. If your email campaigns aren’t accessible, you’re cutting out a sizable portion of your audience. Additionally, many of the best practices of email accessibility can improve the user experience for every subscriber, improving click throughs and conversions. 

The bottom line: Email accessibility is an essential consideration. To build a better approach, you’ll need to understand the principles of accessible design. However, certain “quick fixes" can have enormous benefits for readers — and one improvement can be implemented by adding a single attribute to your emails.

HTML emails often use table elements to present data with clear visual organization

Email content isn’t as controllable as website content; certain style choices aren’t obtainable in certain email clients without the <table> attribute. If you need to add padding to your emails, for instance, you can do so easily with the <cellpadding> HTML attribute — but that requires using the <table> element.

Using <table> can allow designers to tailor the visual appearance of their email campaigns, but some people don’t perceive content visually. If a person accesses an HTML email with a screen reader (software that converts text to audio output), the software may identify every “table” when opening the email. Each cell and each row of the <table> will be read to the user.

Needless to say, that’s not a great user experience. Even if the sender provides a plaintext version of the email, the user will need to take extra steps to get access to the same content as visual users. 

Related: Why Can't Tables Be Used for Website Layout?

Using the Presentation Role in Email Tables

Fortunately, there’s an easy fix. The ARIA presentation role hides an element’s semantics from screen readers and other assistive technologies. 

Normally, hiding semantics is a bad idea: Semantics are useful for navigation, and accurate semantic HTML is fundamental to digital accessibility. However, if you’re using a certain element for visual presentation only — which is often the case when you’re creating tables in emails — role=”presentation" can provide that distinction to most user agents and assistive technologies. 

With role=”presentation" in place, screen reader users will hear a much shorter — and more accurate — description of the content. 

Related: Introduction to ARIA for Web Accessibility

Should I use role=presentation or role=none for email content?

role=none is a synonym for role=presentation. Both roles remove semantics, so either role is acceptable. However, role=none has less support than role=presentation, so role=presentation is the best practice.

Other tips for using role=presentation: 

• If your emails contain tables with actual datasets (in other words, tables that act like tables), don’t use role=presentation or role=none. 
• Remember that role=presentation and role=none will affect table-related children elements. 
• Don’t use aria-hidden=”true" in place of role=”presentation.” While these attributes are similar, aria-hidden=”true" is more aggressive. It completely removes the element from the accessibility tree, which isn’t the goal. 
• Double-check your spelling. A common mistake: Developers often write role=presentational instead of role=presentation, which won’t have the desired effect. 
• Test your emails with a screen reader to verify your markup. Make sure to avoid common misconceptions about ARIA usage.

Review Mozilla’s writeup on the ARIA presentation role for more technical guidance.

Finally, don’t forget about the other best practices of email accessibility. Your emails should have accurate semantic HTML, descriptive alternative text for images, and meaningful link text. If your email layouts are especially complex, provide users with a way to access the email as a web page. 

Related: 10 Tips to Optimize Email Accessibility

Accessible email campaigns reach more users — and deliver better results

When you build emails that function well for people with disabilities, you build more effective campaigns. 

As with all aspects of digital accessibility, the key is to prioritize your entire audience when planning your project. By embracing the principles of inclusive design, you’ll spend less time fixing mistakes — and over time, you’ll find new ways to connect with your audience and keep them engaged.

To learn more about email accessibility, talk to us. You can also find opportunities to improve your web content by starting with a free, confidential website accessibility scan.