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.

See a great example of combining a poster image and text information.

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 such as Arial, Helvetica, or Verdana. Verdana has the most white space between letters which can be helpful for those with reading difficulties;
• If something is important add "Important" or "Note" ensures that all users know something has been emphasized. Do not use color only to call something out. Important: Color and styles such as bold or italics 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 a white background with 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. (The color contrast of these examples are purposely low and difficult to read).

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).

If you are not sure where to start with high-contrast color schemes, we've found Coolers and Color Magic to help with inspiration. Always double check the contrast between foreground and background using a contrast checker like WebAIM's Contrast Checker.

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.

A note about Swarthmore's Mass Emails

Important note: College mass email groups do not display imagery such as posters, flyers or brochures.  

If information contained there is important, include that information as text on the listserv.

In addition, please adhere to Swathmore College's Mass Email Policy.