Accessible Emails

We want everyone to be able to read and navigate our newsletter regardless of their condition. Accessibility is required by laws and policies in some cases. For example public sectors are required to follow accessibility standards in EU: Directive (EU) 2016/2102

Already with small changes and adjustments you can make a huge effect on accessibility and readability of your newsletter.

Find below our guide to code and design accessible email or contact us to adjust your communication accessible for everyone.

How to design for accessibility?

Structure

Pay attention to logical reading order and white space so it is easy to scan your content. Use headings and subheadings to improve the hierarchy and prefer one column structure.

Font

Choose simple font with minimum size of 14px and adjust line-height to 4 pixels more than your font size. Left align your paragraphs to make it easier for people with dyslexia and avoid justifying big amounts of text.

CTA

Indicate links with underline, bold or arrow. Instead of call-to-actions like “Click here” tell user what will happen with more explanatory link text “Click here to shop the products”.

Colours

Make sure that colors are not your only method of conveying important information. Contrast is the key when choosing colours for accessible design. You can test the contrast with different Contrast Checkers available online.

How to code for accessibility?

Semantic code

Using semantic code makes it easier for screen reader users to access your content. Tags like <h1> and <p> allow the screen reader to differentiate between headings and paragraphs. Make sure to test your newsletter as these tags might be presented with variation by different email clients.

Accessible Rich Internet Applications (ARIA)

Webmail clients are adding incorrect ARIA roles to newsletters so avoid using it for now. The only role that will benefit screen reader users for now is role=”presentation”. Also aria-hidden=”true” might be worth testing.

Attributes

Do not forget to use the lang attribute. As this will help screen readers to access the content in right language. Alt attribute will come in handy when you wish to give the information of your image to vision impaired readers. Use a blank alt attribute even in cases where alternative text isn’t needed, as skipping it would cause screen reader to read the whole image address instead.