This infographic has been designed to help you create, design and develop email campaigns that are accessible to all. We’ve provided you with a key to indicate which techniques help you to address the different needs people have.
Break down your copy into sections, and give each of your sections a heading, so, at a glance, or by listening to a screen reader, your subscribers can quickly understand the message, or messages, you’re conveying through your email. Then, break down your sections further into small, digestible paragraphs.
Imagery should be just that – imagery. If your email does feature images that contain text, the text should be illustrative, and not key to the message of the email.
Avoid creating animated GIFs that flash repeatedly, as they may trigger photo-sensitive seizures in some people.
Add an alt attribute inside each <img> tag, and carefully consider the alternative text you insert into it.
Add a full stop after the alternative text within each alt attribute, as it will cause some screen readers to helpfully pause before proceeding on through the email.
For a detailed checklist to assist you in the creation of accessible emails, DOWNLOAD THE EBOOK.
Buttons should be bullet-proof, and selectable across their entire area using a finger or thumb. If your email features more than one button, consider writing a different call to action for each one.
Build your buttons to a minimum height of 44px.
For more tips on using design elements to create accessible emails, DOWNLOAD THE EBOOK.
Link your calls to action, rather than text that instructs subscribers how to respond to your calls to action (e.g. update your preferences rather than click here to update your preferences). Build links so their underline doesn’t interfere with the link text.
Let your email content breathe, increasing its readability by using white space. Surround your email with typographic margins and group related content together, separating each group with white space. Insert paragraph spacing to help distinguish one paragraph from another.
For your headline, choose from decorative, serif or sans-serif typefaces. Be mindful that it needs to remain easy to read.
For headings, choose from serif or sans-serif typefaces. Serif typefaces, such as Georgia and Droid Serif may help to distinguish your headings from your body copy.
For body copy, choose a sans-serif typeface, such as Arial or Roboto, but avoid using thin or light weights, such as Roboto Thin or Roboto Light.
Define a minimum, readable size for your body copy. If your body copy’s font-family has a large x-height, apply a minimum font-size of 14px. If your body copy’s font-family has a standard x-height, such as Arial, apply a minimum font-size of 16px.
As a guide, style your line-height at 1.5x the font-size – font-size:16px; line-height:24px; or font-size:16px; line-height:150%; for example.
Check the color contrast between the color of your text and the color of the background it sits upon, using the WebAim Color Contrast Checker:
Retain the default (left) alignment of your body copy, avoiding centered or justified text.
Build your email so it makes sense when read from top to bottom, without repositioning its content with CSS.
Manage your columns, so each line of text is no longer than 60-70 characters.
Use semantic tags to markup each piece of content. Headlines should be wrapped within pairs of <h1> tags, headings within pairs of <h2> to <h6> tags, and paragraphs within pairs of <p> tags.
Add style="margin:0;" inside your opening tags, to prevent email and webmail clients adding excessive line space.
For more design and development tips, and best practices for creating accessible emails, DOWNLOAD THE EBOOK.
On your structural tables, add role="presentation" inside each opening <table> tag, to prevent screen readers ‘reading’ each cell within your email.