How to code accessible emails with semantic HTML and ARIA

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

for the purpose of indenting text. These elements should be reserved for their intended purpose: highlighting quotations and unordered bulleted lists.

Using tags for section headings

Styling a Tag to increase the font size of a text heading in an email, and the bold font doesn't add much meaning. But using logically structured tags throughout the email body helps screen readers and subscribers understand how the content should be organized.

Two important rules for tags in emails:

1. Only use one
2. Always follow a logical downward hierarchy for subheadings: h2, h3, h4, etc.

The

You can have several

s and

As long as there is a sensible hierarchy within the email sections:

Subscribers can use keyboard navigation to move between sections and subsections to find what they need or skip what doesn't interest them. You can always adjust the size and style of tags in CSS to suit visual requirements. However, to improve accessibility and avoid confusion from screen readers, use them only as headings and not as a way to format text.

Use of lang= for different languages

The language attribute (lang=) is very valuable for multilingual email campaigns. If you have an international audience or segment your list by language, lang= helps screen readers, browsers and email clients determine how to correctly interpret and render the content.

This attribute supports accessible email code by telling the screen reader to read the email in the correct language. Without lang=”es” in the email code, screen reading software may attempt to read an email written in Spanish in English, which is often the default language.

The video below shows what the popular screen reader JAWS sounds like when it reads an email in Brazilian Portuguese with and without using the lang= attribute.

Add “lang=” to the tag of your email so that the whole thing is read in a specific language. Note that some customers remove it from the

Label. You can also add the lang= attribute to a

Day if part of the email should be read in another language.

For a complete list of HTML language codes, contact W3Schools.com.

Using and for emphasis

What is the difference between using and to create bold or italic text versus And ? Turns out it's just semantics.

The purpose of the and tags are intended to indicate that certain words should be highlighted. You may also want to call out words clearly Just for visual effect or italicize a title, but that may not mean those words should be read differently.

Because of this ambiguity, it may not matter which one you use. Accessibility experts at Penn State University say that while this is theoretically possible, screen readers rarely pronounce wrapped text or otherwise. Most screen readers treat them the same as and tags.

Still, it's good to follow best practices. Use or if you want to draw attention to important text, including alerts, promotion expirations or key terms.

Using other semantic HTML tags in emails

There are many other types of semantic markup that can be beneficial to subscribers using assistive technology. For example, the element could help indicate where an actionable element is located in the email.

However, as expected, email client support for some HTML5 semantic elements is at times inconsistent. According to Can I Email, the following items are fully or partially supported in major clients (Apple Mail, Gmail, and Outlook):

Semantic markup options for emails

• To specify a self-contained composition in an email. Could be useful for content-rich email newsletters.
• To specify the sidebar content in an email.
• To create a disclosure widget that can be toggled on and off.
• To display independent content, namely media such as images.
• For captions that describe images and graphics.
• To display footer content that a subscriber may not need to review.
• To indicate header content that a subscriber may not need to review.
• To display the dominant content in an email.
• To highlight text of interest or importance.
• To specify navigation elements in an email.
• To specify a generic, standalone section in an email.
• Used as a disclosure field within the element.
• To specify:
  • Time in 24 hour format.
  • A specific date/time.
  • A certain period of time.

In addition to the somewhat inconsistent email client support, developers should be aware that screen readers also treat less common semantic HTML elements differently. For this reason, it's worth previewing important emails using various screen readers.

As email continues to evolve and digital accessibility continues to be an issue, developers can start with and

Tags when experimenting with other semantic markups. Email accessibility advocate Paul Airy of Beyond the Envelope™ says it's about changing your mindset.

“Challenge yourself and actually ask yourself, 'How should I describe this element?' instead of a content in a it has no real connection to what it is.”
~ Paul Airy, Accessibility and Usability Consultant

ARIA for email accessibility

ARIA stands for Accessible Rich Internet Applications. These are a set of attributes that define ways to make digital content more accessible.

As with semantic HTML5, not every ARIA label is fully supported by major email clients. However, there is one very important attribute that will help you code accessible emails. That would Role=”Presentation“.

According to a blog post on the Email Geeks Community website, using role=”presentation” is a sign of a good developer. But why is that?

Using “role=”presentation” with tables

At the beginning of this article, we mentioned how email developers often use

for layout purposes. However, this creates problems for subscribers who use screen readers to access email.

This is what a typical screen reader sounds like when it encounters a

:

It's easy to see why this would confuse and frustrate a blind subscriber. The reason for this confusion is that tables are designed to display data. So the screen reader tries to display it that way.

The user experience changes dramatically when you use an ARIA attribute to set the table's role to Presentation. Here is an example of what this Accessilbe email code might look like:

Hear how much clearer and cleaner the email copy looks with the role = “Presentation”:

Using aria-hidden=”true”

Another ARIA attribute that proves useful for email developers is aria-hidden=”true”. This can be added to hide certain elements of an email from screen readers. This may include decorative graphics and duplicate content.

Use aria-hidden=”true” to make the email experience cleaner. However, note that it should not be used for focusable elements in an email. Focusable elements are interactive parts of an email that someone would interact with using keyboard navigation. This can include buttons, links, or anything else a subscriber clicks or selects.

Keep in mind that blind subscribers and those who have difficulty using a mouse or trackpad may rely on keyboard navigation to interact with email.

According to Can I Email, the aria-hidden attribute is supported in almost every version of Apple Mail, Gmail and Outlook.

Check your email code for accessibility

How can you be sure you have encrypted an accessible email address? The only way to know for sure is to test it. Pathwire Inbox Accessibility report found Only 14% of marketers said they use accessibility testing tools during email production.

With Email on Acid's Campaign Precheck, an automated accessibility assessment becomes part of the pre-email delivery process. With our innovative email accessibility features, you can:

• Evaluate and improve color contrast.
• Optimize email code for screen readers.
• Automatically set presentation roles for tables.
• Add image alt text.
• Improve link accessibility.
• Check emails using Zoom settings.
• Preview your email design with color vision deficiency filters.

Additionally, Email on Acid helps you optimize and fix a variety of other factors before you hit send, while also providing previews of dozens of popular email clients. Sign up for a free trial and find out if your emails meet accessibility guidelines.

Author: Megan Boshuyzen

Megan is a graphic designer and email developer who has worked on all aspects of email marketing. She believes that good emails for good causes make a positive difference in the world. Megan currently works as an email developer for Sinch Email. Visit their website and learn more at megbosh.com.

We use cookies to optimize your user experience and to send improved content. If you continue to browse our website, you accept these cookies. You can personalize and change your consent choices by returning to this website at any time.

Allow everyone. Disable all

Cookie settings

Your cookie choices

When you visit a website, information may be stored or accessed in your browser, usually in the form of cookies. This information may be about you, your preferences or your device and is used primarily to make the website work as you expect it to. The information does not typically identify you directly, but can provide you with a more personalized web experience. Because we respect your right to privacy, you can choose not to allow certain types of cookies. Click on the different category headings to learn more and change our default settings. However, blocking some types of cookies may impact your experience on the website and the services we offer.

Allow everything

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps