We want to make our emails easy to read for a wide, diverse audience.
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.
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.
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.
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.