Accessibility in Messaging

Following accessibility standards in your marketing messaging demonstrates to your existing customers that you proactively think about their needs and opens you to a wider audience.

General Accessibility Best Practices

There are some general approaches you can take to create accessible messaging. 

  • Incorporate Responsive design
  • Use a logical reading order
  • Use HTML elements
  • Use short, descriptive, and relevant alt text for images and links
  • Indicate content that’s important and let devices focus on the most relevant content
  • Break up content into smaller sections to facilitate understanding
  • Create a text-only version
  • Use buttons that are at least 42 pixels (bulletproof buttons)

Notes:

  • If you’re using Email Composer to build your messaging, many of the following suggestions are done automatically. 
  • If you’re using Overlays, you can create all content manually with HTML in a Text field. You can also add custom CSS through the Overlays UI. 

HTML Elements
Using HTML elements allows screen readers to interpret your email. 

<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML Reference</title>
</head>

<body>
<h1>Important heading</h1>
<p>Your email content. </p>
<h3>Less important heading</h3>
<p>Separate content into smaller sections and use paragraph tags.</p>
</body>

</html>

Declare a content type

The content type is important, as it ensures characters are correctly interpreted. This is especially important for screen readers or other assistive technologies. This is automatically done in Email Composer.  

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

Use a title tag
Create a title for your message that describes the content. This won’t be visible to your readers, but may be important for screen readers. This is automatically created from the subject line. 

<!DOCTYPE html>
<html>

<head>
<title>HTML Reference</title>
</head>


<body>
Your email content
</body>

</html>

Declare the language using the lang attribute
Declaring the language tells the screen reader which language to speak. This is automatically done in Email Composer. 

<!DOCTYPE html>
<html>
<html lang="en">

<head>
</head>

<body>
Your email content
</body>

</html>

Use alt text for images
Alt text provides a description of the image for a screen reader. Avoid starting your description with “Image of” or “Picture of”.

<!DOCTYPE html>
<html>
<html lang="en">

<head>
</head>

<body>
<img src="img_chania.jpg" alt="Flowers climbing the walls of buildings in a narrow brick paved street in Chania, Crete">
</body>

</html>

If you’re using Email Composer, inserting an image opens the Content Properties panel. Add alternate text here:

Best Practices for Vision and Print

Some of the General Accessibility best practices crossover with best practices for  vision and print accessibility. 

Use a readable web font
Choosing easily legible fonts will benefit your readers from the outset and open your messaging to the widest audience. The most recommended fonts are simple and unadorned, and are likely to be available on a reader’s device. Verdana, Arial, Tahoma, and Helvetica are recommended sans serif fonts. This is also applicable to building an Overlay
 

Use Headings to organize your content

Readers using screen readers may use heading tags to jump between content sections. If your message comprises a few parts, consider using HTML headings to tag content sections. This is automatically handled in Email Composer. 

<!DOCTYPE html>
<html>
<html lang="en">
<head>
</head>
<body>
<h1>This is the first section of content</h1>
<p>Introductory content</p>
<h2>This is a new section</h2>
<p>Content for the new section</p>
</body>
</html>

Use sufficient color contrast

Use more than one color in your messaging–a good color contrast will make your content easier to read. Be careful with red and green color combinations, as well. This is also applicable to building an Overlay

Best Practices for Mobility and Touch

There are a few considerations for readers with mobility issues. These suggestions are applicable to both building an email template and an Overlay.

Use bulletproof buttons

Buttons that are at least 42px will give users the best experience and provide a large enough clickable surface. 

Give links multiple sensory characteristics

Make sure links are easier to see by giving them a different color, underlining them, or changing their size.

More Resources

Check out these links for outside resources on building accessible messaging. The links are to PDFs. 

Achieving Accessibility in Email Marketing For Developers

Achieving Accessibility in Email Marketing for Marketers and Designers

Top