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? #
- Fonts, colors and styles used
- Layout tables
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 #
- Create a Word document accessible by following the Word accessibility guidelines.
- 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.
- 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.