Menu

Accessibility 

There are many things you can implement into your HTML to ensure your emails are available to as many of your recipients as possible. Think about things you can do to reduce barriers for them, as well as the tools (such as screen readers) they might be using to read your emails. Below are a few things you can use as a checklist when creating your template, the more you implement into your HTML, the more accessible your emails will be.

  • Include alt text with detailed descriptions (you can read more about this here).
  • Consider what is to be included in the plain text version of the email. These are important to include in for accessibility and deliverability reasons.
  • If there is a scenario where you don't need alt text, then use alt="", so that screen readers know it is meant to be blank. Otherwise the screen reader will attempt to read the code to the recipient. 
  • Add role="presentation" attribute to each <table> so that it's clear the <table> is being used for layout.
  • Use can also use the role attribute for elements such as headers and footers (for example, role="header")
  • Try to use semantic HTML tags, such as <p> and <h1>, where applicable.
  • Make Text Readable. 14px should be the smallest font size used within your template.
  • Avoid Walls of Text to ensure the content is easy to navigate and can be read with ease.
  • Try to avoid thin font weights.
  • Think about your line height. A general rule you can follow is - 1.5 times the font size. For example, 14px would pair nicely with a line height of 21px.

Testing as you go   

There are many things that need to be tested before an email is sent out, however testing during the build stage is also just as important. Your Design System will be the base for all emails created from it, so making sure the code is supported in as many email clients as possible and renders correctly on desktop and mobile, is something that should happen throughout the build. 

There are going to be many elements that make up your Design System, which means you will want to think about running quick tests, for when a new element or section of the code is added, and doing more frequent in depth testing for seeing how your code is rendering in different email clients and devices. By doing so, you will reduce time spent building the Design System overall because any issues will be caught early and throughout the build, instead of waiting to check at the end. 

A few things to look out for while testing: 

  •  The rendering of each element and module on Desktop 
  •  How the HTML is appearing in a mobile view 
  •  How your images are rendering / displaying 

 Next: Including ESP specific code in your Email Design System, do you need it?

← Back to /Code