Design emails accessible to all

Here is a list of recommendations for writing (or producing templates that generate) messages that are accessible, that is to say, understandable by all.

What can be problematic? #

Above all:

  • Images
  • Fonts, colors and styles used
  • Layout tables
  • Links
  • Attachments

Important #

If your communication contains a lot of information and its layout needs to be complex:

  • create the email with the method which is the easiest for you,
  • add an accessible Word file (or text file) as an attachment containing the same level of information (but only in text!),
  • specify that the equivalent accessible text is contained in the attachment.

"Everyday" emails #

For all your everyday emails:

  • Use simple, sans serif fonts: Arial, Calibri or Accessible DfA
  • Adopt a font size at least equal to 10 points
  • Put a capital letter at the beginning of each sentence but avoid whole sentences in capital letters
  • Align the texts to the left (avoid justifying)
  • Avoid too many italic or bold chunks of text or phrases
  • Check the contrast between the font color and the background using the tool Color Contrast Analyser for example and limit the total number of colors used
  • Use a neutral background: no decorative paper letter or background images
  • Enter an alternative text for all the images (Office: right click on the picture> Format Picture > Alt text> "Description" field) or if the image is just descriptive, leave the "Description" field empty
  • Use the "Title" and "Subtitle" styles of the "text format" menu if long mail, with several sections
  • Add an emoticon alternative text, example: ";) [wink smiley] " instead of just ";)"
  • Avoid animations, animated GIFs and luminosity flashes
  • Write explicit link labels, for example: prefer "discover our offers" to "click here" or "find out more"
  • Use the "Withdrawal, Spacing" functions to skip lines, example Office suite: Page Layout menu> Paragraph> Indent or Spacing or Right click on your text: "Paragraph ..."
  • Check that the size of the buttons and clickable areas is sufficient : no smaller than 1cm (0.4")
  • Configure your mail tool: HTML format by default, Outlook for example: File> Options> Mail> Compose messages
  • Attachments: Use the "Insert" function to add an attachment so that the screen reader signals its presence, it will appear in the "Attached" field.

Pushmails / newsletters / automatic communications #

You have several options for creating an accessible Pushmail.

From a Word document #

  1. Create a Word document accessible by following the Word accessibility guidelines.
  2. Then use the "Send to Mail Recipient"* option.

Add this Option the first time via File> Options> Quick access toolbar> “Send to Mail Recipient”

From a newsletter / mailing tool #

It is quite possible that the tool you have chosen will provide natively accessible templates, but that does not preclude following our general guidelines for editorial content.
Always check:

  • Text alternatives for images
  • Level titles
  • If presentation tables: role=presentation in the table tag

Creation from HTML (or other dedicated tool) #

Compose the HTML code in an accessible way by following our main web recommendations.

Important: given the interpretation issues of multiple mail clients, the layout should instead be done via tables using the role=presentation attribute in the table tag.
In order to occasionally test the support for HTML and CSS in the various email clients, use Can I email? and Can I use in HTML emails? Websites.
To test your entire email campaign, use the Accessible email site.