Electronic mail documents are structured in the same way as web documents, with more limitations than available on a webpage. Example email limitations:

  • You cannot directly embed a video in an email, only link to one, however, animated GIFs can emulate visual-only short videos.
  • You cannot directly embed a form in an email, only link to one.

Email messages broadcast to a large audience (i.e. individuals whose abilities or disabilities are unknown to you) should conform with all WCAG 2.0 requirements relevant to them. Private email messages are not required to be accessible, but if your private email message has the potential viability to be forwarded to a larger audience, you should consider making it accessible anyway.

Email accessibility covers more than individuals with disabilities using assistive technology (AT). It allows individuals using a variety of internet browsers, and software to access the same content.

Due to the variety of options for viewing email, you should adopt a text-first strategy in designing them. This is similar to the new web designing standard of mobile-first. Since a mobile phone is currently the smallest screen size users can view a webpage on, mobile is considered the lowest denominator. Make sure it looks and works correctly on a mobile phone, and work up through the screen sizes. Similarly, since not all email clients show images, you should design from a text-first stance, and embellish with images where the loss of text will not inhibit your readers from viewing your entire message.

example email all photos
Many well-known companies still use image-heavy emails. This is how they often show up on email clients, including those of sighted users. This provides little information or engagement and requires trust, that you have yet to establish, to convince users to enable the images to download to their client.

For example, a very simple text-first strategy may have this template:

  1. Message Body:
    1. Message [Text in the form of paragraphs, lists, and/or tables, along with links to calls to action]
    2. Signature or Closing [Text]
  2. Footer:
    1. University logo [Image]
    2. Contact Info [Text and links]

A more embellished text-first strategy may have this template:

  1. Header: 
    1. University logo [Image]
    2. Main Call to Action Heading
  2. Message Body:
    1. Start of Message [Text in the form of paragraphs, lists, and/or tables, along with links to calls to action]
    2. Supplemental Graphic [Image and maybe a link to a call to action]
    3. End of Message [Text in the form of paragraphs, lists, and/or tables, along with links to calls to action]
    4. Signature or Closing [Text]
  3. Footer: Contact Info [Text and links]

In each case, the use of colors, fonts and infographics can be used strategically, making sure all images have appropriate alternative text.

Signatures / Contact Information

When providing contact information, it is better to use text than graphics because your users need to be able to access them (e.g. phone numbers, addresses, social media links) as much as they do your message’s calls to action.

References

Guides and How-To’s

Guidelines

Simulations