Accessibility

We want to make our emails easy to read for a wide, diverse audience.

Color Ratios

Be mindful of the contrast between the text colors and background colors. Our templates already pass WCAG AA and AAA guidelines. They should suit your needs, but if you build on them use WebAIM's Color Contrast Checker to be sure you have proper contrast.

Text Hierarchy

Screen reader users rely on HTML heading elements to navigate pages and determine content hierarchy. Be sure to use header tags to denote headers and subheaders.

Image Text Alternates

For all images, include alt="A description of the image". Purely decorative or utilitarian images should have an empty alt attribute (alt="") to inform screen readers that the image should be ignored. Other images should have alt attributes that explain the meaning of the image.

Link Text

The text you use in a link is important and helps screen readers navigate the page. Instead of generic "click here" text, use descriptive text links that state the purpose of the link.

Text-Only Option

Provide a text-only version of the email so that the user can determine which version is the most comfortable format to read.

Hide Presentation-Only Content

Tables are a crucial way to consistently display emails across the spectrum of email clients. However, screen readers can get bogged down by navigating through the copious nests of tables that emails often contain. To communicate that a table is only being used for presentation purposes, use role="presentation" aria-hidden="true" so the screen reader can pass by it. For tables that are displaying tabular content that's meant to be digested, don't use these attributes. It’s also recommended to use the HTML attribute role=”presentation” on any image with an empty ALT attribute to avoid the name for the image being read.