Designing for Accessibility
Include role=”presentation” on all tables used for layout.This prevents screen readers from reading aloud the structure of each table cell.
Use HTML1 semantic tags whenever possible. Tags like
and allow screen readers to quickly jump from section to section. Tags like and give text more importance.
Include an alt attribute on every image.Be descriptive and use alt to help readers “see” the email if images aren’t displayed. Use an empty alt=”” for images a screen reader should skip (eg. decorative images). Screen readers will dictate the filename of images without an alt attribute (eg. “icon dash checkmark dot png”). More on alt text.
Avoid “Click Here” or “Learn More” link copy.It helps us avoid spam filters and gives context about the link to folks using screen readers or dictation software. We have some copy guidelines for buttons and links.
Create a plain text version of every email.It helps us avoid spam filters, some email clients don’t support HTML, and some people just prefer plain text. They also respond better to things like changing font size, family, and color, and work well with screen magnifiers. We don’t have many rules or guidelines for formatting plain text emails, though they typically look something like this. Our email service providers have tools to convert HTML email to plain text.When in doubt, nest another table. For finer control of your HTML, try nesting tables when building emails.
Use padding for spacing in table cells. Margins aren’t fully supported on tables and container elements.