The accessibility for HTML emails is often overseen, however, with a few tweaks can greatly improve a readers experience using assistive technology, such as a screen reader.
Set the HTML langauge attribute
To ensure the correct pronunciation of your emails content, define the main language using the lang=”” attribute.
<html lang="en"></html>
Set the HTML title attribute
Help readers identify your email in browsers by including a descriptive title.
<title>My Email Title</title>
Set character encoding
To ensure the correct display of HTML characters in your email, define the character encoding using the meta charset= attribute, by adding the following meta within the <head></head> of your email.
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
To find out which character set matches your emails language, visit W3Schools: W3Schools – HTML Encoding (Character Sets).
Divide tables into sections
The <table> tag is not designed for layouting and rather used for displaying data, assistive technology will interpret them that way, by adding content to each table cell.
The use of tables complicates the navigation of emails, as you need to navigate through each cell within a table in order to read the content. <div> based layouts allow you to navigate through content from one element to another.
For table based layouts there is a simple fix, by adding the role=”presentation” to each <table> tag, these tables will be treated as a <div> tag.
By adding the role=”presentation” to each table, you are greatly improving the accessibility of your email!
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td>Content</td>
</tr>
</table>
Use semantic headings and paragraphs
Using semantic tags (<h1> – <h6> and <p>) help readers with assistive technology such as screen readers distinguish headings, and the different levels of the content.
By default headings and paragraphs have their own predefined margining which can result in unwanted spacing and gaps between elements. A simple fix to reset these values is to add an inline style margin:0; and mso-line-height-rule:exactly; to each <h> tag and margin:0; to each <p> tag, where the mso-line-height-rule helps to control the line height in Outlook email clients.
<h1 style="margin:0; mso-line-height-rule:exactly;">My Heading</h1>
<p style="margin:0;">My Paragraph</p>
Ensure that all images have an descriptive alternative text
A widely accepted best practice is the inclusion of the alt attributes (also known as an “alt tag” or “alt text”, which is shorthand for alternative text) for images.
By default most email clients block images. Instead of showing the image, the email client will instead display the images alt text. This is very useful, especially in cases where an email is primarily composed of images. The alt text can help communicate the contents of the email even if the images cannot.
In a situation where images can not be loaded, due to a slow internet connection, timeout or broken links, the alt text will appear instead of the image.
For visually impaired readers, the alt text is used by screen readers. Since these users are unable to view text or images, the alt text serves to describe the image and contents via the screen reader.
<img src="http://www.emailhtmlcheck.com/logo.png" border="0" alt="HTML Email Check">
