Best Practices: Send Accessible Emails (With a Checklist)

[HuckleberryTate]

This is part of a series aimed at improving your outcomes with govDelivery emails. Keep an eye on govCommunity for more helpful and informative ideas.

The question comes up a lot: “How do I ensure my templates are 508 compliant?” My answer is that it really isn’t possible to ensure an email template is 508/ADA compliant. There are a number of factors that the person building the email and hitting send can do to make it non-compliant. The template is part of it, but the content is also important.

An email is a simple, small digital document. Compared to a web page, which could have scripts, interactive elements, iframes, and other features, an email is a walk in the park. The elements present in an email are images, text, tables and links. Here are the ways to make those elements compliant.

Images

Use appropriate alt text on images. This is done in govDelivery when you upload an image and name it. As it says in the upload tool, the name will also be used as the alt text. Images that will be used purely as style should be uploaded as Style type. When the bulletin goes out, those images will have blank alt tags, and screen readers will ignore them. Images can also be made with text or logos in them. Ensure that there is sufficient color contrast between the text/logo and the background that it is upon.

Text

Ensure there is sufficient color contrast between the text and the background. Ensure that you have your headings in proper heading hierarchy. H2’s need to be preceded by H1’s, and H3’s by H2’s. Don’t use an H3 heading after an H1, just because the H3 is the color you want to use in that spot. Headings are used to convey the outline and structure of your content. Use plain language, so the most people possible can consume and understand your content.

Tables

Tables are used to organize and present content and data. A typical table that is just breaking up blocks of content doesn’t need any further action. Tables that are structured with headings and have data in organized columns and rows need to have their heading rows / columns identified. This can be done in the table options in the text tool in govDelivery.

Links

In the Template Builder in govDelivery, text links are underlined. This is to make it clear and obvious that the text is a link. Ensure that the linked text color has sufficient color contrast with its background. Look for text that may get auto linked by email clients, such as dates, phone numbers, and URLs. Ensure that if this text gets linked by Outlook, for example, that the default linked text color – blue – has sufficient color contrast against the background it is on. If you have a dark background, and place an unlinked email address on it, it will become linked for the subscriber. You should consider linking these elements that get auto linked, because then you will be able to control the color contrast.

Accessibility Checklist

Follow this simple checklist to ensure a bulletin is accessible:

1. Do all of my images have appropriate alt text?
2. Are my headings in order?
3. Do I have sufficient color contrast?
4. Do I have any data tables, and are their heading rows/columns identified?
5. Have I used plain language so my audience can understand what they are reading?

I hope this gives you a better understanding of accessibility as it relates to emails and the ways that you can ensure your next bulletin is in compliance.

About the Author

Huck Tate is a govDelivery expert at Granicus, who spends much of his time helping Granicus customers design beautiful and effective email templates.