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)
- 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.
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
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.
Check out these links for outside resources on building accessible messaging. The links are to PDFs.