Accessibility in Messaging
Contents
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)
- 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.
- This documentation includes general guidelines for web accessibility. You must ensure that your Overlays are ADA compliant.
<!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.
<span style="font-weight: 400;"><!DOCTYPE html></span>
<span style="font-weight: 400;"><html lang="en"></span>
<span style="font-weight: 400;"><head></span>
<span style="font-weight: 400;"><meta </span><b>http-equiv="Content-Type" content="text/html;</b><span style="font-weight: 400;"> charset=utf-8"/></span>
<span style="font-weight: 400;"></head></span>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.
<span style="font-weight: 400;"><!DOCTYPE html></span>
<span style="font-weight: 400;"><html></span>
<span style="font-weight: 400;"><head></span>
<b><title>HTML Reference</title></b>
<span style="font-weight: 400;"></head></span>
<span style="font-weight: 400;"><body></span>
<span style="font-weight: 400;">Your email content</span>
<span style="font-weight: 400;"></body></span>
<span style="font-weight: 400;"></html></span>
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.
<span style="font-weight: 400;"><!DOCTYPE html></span>
<span style="font-weight: 400;"><html></span>
<b><html lang="en"></b>
<span style="font-weight: 400;"><head></span>
<span style="font-weight: 400;"></head></span>
<span style="font-weight: 400;"><body></span>
<span style="font-weight: 400;">Your email content</span>
<span style="font-weight: 400;"></body></span>
<span style="font-weight: 400;"></html></span>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".
<span style="font-weight: 400;"><!DOCTYPE html></span>
<span style="font-weight: 400;"><html></span>
<span style="font-weight: 400;"><html lang="en"></span>
<span style="font-weight: 400;"><head></span>
<span style="font-weight: 400;"></head></span>
<span style="font-weight: 400;"><body></span>
<b><img src="img_chania.jpg" alt="Flowers climbing the walls of buildings in a narrow brick paved street in Chania, Crete"></b>
<span style="font-weight: 400;"></body></span>
<span style="font-weight: 400;"></html></span>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.<span style="font-weight: 400;"><code><!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