Email

About email accessibility

Email messages should conform with all WCAG 2.0 requirements relevant to them. Electronic mail documents are structured in the same way as web documents, with more limitations than available on a webpage. Examples of web content functionality that cannot be done on emails:

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

Why should your emails be made accessible?

First scenario is emailing a person you know. If they have disabilities, you accommodate them with an accessible email. If they do not have disabilities, your email does not have to be accessible.

Second scenario is a person you know who forwards your email. In that scenario, you do not know if the next recipients have any disabilities. You should make your email accessible for the audience you do not know.

Third scenario is a wide broadcast of your email. In that scenario, you do not know the disabilities of every member of your audience. You do not want to accommodate only certain disabilities in multiple emails. You want to use universal design to make a single email accessible to your whole audience.

Not everyone reveals their disabilities. Disabilities are a private matter to many people. In certain environments or cultures, it may be seen as socially unacceptable to have certain disabilities. People may question a person's disabilities, especially invisible disabilities. No one is required to reveal their disabilities. You should always assume there is at least one person who needs your email to be accessible.

We all have our preferences for how we read emails. Some of us use a different email client. Some of us use assistive technology (AT) with our email client. Emails should be universally designed to address all these options.

Note: Since they are all different, the final message received will never be exactly as you designed it. For example, you may have found a specific color of blue that you wanted on a message. That blue color may not be available on all email clients. That blue color may look faded on some computer screens. Screen reader users may not even see the color of blue you used. Any member of your audience that is color blind may not see the color of blue you used.

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.

Enlarge the example image

How to make an accessible email

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 web page 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. Add images where the loss of text will not stop your audience from viewing your entire message.

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

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]
Footer:
1. University logo [Image]
2. Contact Info [Text and links]

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

Header:
1. University logo [Image]
2. Main Call to Action Heading
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]
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.

Email Documents

About email accessibility

Why should your emails be made accessible?

Example of a major corporation's email message when images do not load

How to make an accessible email

References

EIR Accessibility Coordinator

Karole Schroeder

Email Documents

About email accessibility

Why should your emails be made accessible?

You do not know the disabilities of your audience

You do not know what browser, device, email client, or assistive technology your audience is using

Example of a major corporation's email message when images do not load

How to make an accessible email

Use text-first design strategy

Signatures / contact information

References

Simulations

Cross-reference: Accessible Documents

Cross-reference: Digital Writing

EIR Accessibility Coordinator

Karole Schroeder