Guidelines for Creating Accessible Emails

Photos or Images with Text

To ensure maximum inclusion of all members of our community, do not sent email that are only pictures of text (e.g. flyers, posters).  Instead, include all the text from the picture as the body of the text and attach the flyer. 

Why? We don't all access email in the same way. Many in our community listen to emails rather than read them, some do not have sight, some forgot their glasses, some can't see the text in images because the text is distorted or there is low contrast, some are accessing email on mobile devices and have low bandwidth, some are avoiding screens because of injury or eye fatigue, etc.  

• Ask yourself if an image is necessary for the message, does it relate to the content and how.
• If photos are needed, describe the action or feeling of the photo(s) and how it relates to the content. G-Mail now allows alt text to describe images:
  • Right click on the image
  • Choose Edit alt text
• Important: Avoid images with text. If the image is necessary, then repeat all the text included in the image as part of the email.

Find a great example of combining a poster image and text information (http://bit.ly/SwatEmailExample)

Font

• Set your font size between 12 and 16 points. In Gmail that means no lower than “Normal”
• There is a lot of debate about which font family works best.  We suggest using San Serif fonts (Arial, Helvetica, or Verdana)
• If something is important add "Important" or "Note" ensures that all users know something has been emphasized.  Do not use color only call something out as color can not be perceived by those who listen. 
• DO NOT use underlines in electronic communications unless the text is a link.

Line Height

• Consider increasing the spacing between lines to improve readability. This is of particular importance for eye tracking and can reduce eye fatigue
• Line height (line spacing) should be at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size

Colors

• Use high contrast colors
• On white backgrounds, avoid low-contrast colors (no yellow!!)
• Avoid dark backgrounds when possible (stick to white background and dark text). If using dark backgrounds, avoid using dark colors - keep contrast high.
• Note - people with colorblindness may perceive reds and greens as black or grey
• Examples:
  • These are acceptable color combinations
  • These are not

Tools for checking color contrast

• WebAIM Contrast Checker (Recommended)
• WCAG Contrast Checker (Firefox add-on)
• Color Contrast Analyzer (Chrome add-on)
• View your document in grayscale - for web content try something like the High Contrast plugin (Chrome add-on)

Structure

• Hierarchy of information
  • Keep important information close to the top of the e-mail
  • Go into more detail later in the body
• Gmail does not allow for headings.  Important: this is the ONLY exception to creating “fake” headings by using bold, bigger font sizes, all caps, etc. If you are using other email clients this may not be an issue
• Use real bullets and numbered lists
  • Use number lists when the order is important

Use descriptive link text

Link text should give readers an idea of where they will go when they engage a link.  Some read-aloud and screen reader tools allow users to list all the links in one place. This means some users are getting links without the surrounding text - it is very important that link text makes sense on their own.