Creating accessible email communications that benefit everyone will help ensure that your message comes through clearly to your audience. These guidelines will aid in creating email content that is inclusive to everyone and provides everyone with equally effective and timely access to the same information in emails and attachments.
Composing an Email
Text
Microsoft Outlook and most major email programs offer the ability to format emails in rich text (HTML). With rich text, you have the capabilities to create and customize accessible emails.
Fonts
The correct choice of font can provide the reader with a positive and simple reading experience.
- Use sans serif fonts. Sans serif fonts look cleaner and less distracting, making them easier to see and read.
- Fonts such as Arial, Calibri, Helvetica, and Verdana are examples of sans-serif fonts.
- Avoid serif, cursive, or any stylized fonts that may be difficult to see.
- Fonts such as Times New Roman, Georgia, or Old English are examples of fonts you should not use.
- Keep text at a reasonable size, typically at least 11- or 12-point font.
Headings
Proper heading structure helps users and assistive technology identify different components of an email and separate them accordingly. Screen readers will also announce each heading and its heading level while traversing the email.
- Use the provided heading styles (H1, H2, H3, and so on) to denote headings rather than just making text larger or bold.
- Use correct heading structure. Headings should be used hierarchically.
- The H1 is used to represent the most important idea on the page, most likely your email's title.
- Next, sub-sections are organized with H2 level headings.
- H2 sub-sections can be divided even further with more H2 headings, H3 level headings, and so on.
- Headings should not be skipped or jump to a different number that is not directly above the current heading (H3 should not jump to H6, etc.)
- Try to plan out a heading structure before composing an email.
- For more information on headings, go to the Web Accessibility Initiative's page on heading structure.
- The following image is an example of a proper heading structure (Image credit: Scope).
- At the top is H1.
- The first sub-section is H2, which does not contain any further sub-sections.
- The second sub-section is another H2 which is broken down into two more H3 sub-sections, and one of those H3 sections has an H4.
- The third H2 has one H3 sub-section, and one H4 sub-section.
- The fourth H2 has one H3.
How to Apply Heading Styles
There are two ways to apply heading styles in Outlook:
- Highlight your text, right click, and choose the "Styles" button.
- Go to the "Format text" tab and choose a style in the "Styles" group.
Please see the following articles for more information about proper heading structure:
Lists
Screen readers will make an indication that it is reading from a list along with identifying sub lists. When lists are not used, a screen reader may announce each list item as unrelated paragraphs, confusing the user.
- Use the provided bulleted list and numbered list buttons to create lists. Refrain from just using numbers or symbols to separate list items.
- Nest list items by using the indent button in your toolbar. You can also nest list items by using the Tab key.
Color Contrast
When making text accessible, it is important to remember that only brightness is visible to all users. For example, red text on a green background may disappear entirely for people who are color blind, have low vision, or are viewing the site in grayscale.
- Colors for fonts and graphic elements should provide sufficient light/dark contrast against their background.
- Do not rely on color alone to denote important text on a page or a link.
- Utilize a color contrast checker like the WebAIM Contrast Checker tool when composing your emails.
- The contrast checker will tell you whether your chosen color's contrast passes WCAG (Web Content Accessibility Guidelines) 2.0 guidelines. See the "explanation" section in the WebAIM link for more details on color contrast guidelines.
- The following image contains some examples of good and bad color contrast (Image credit: CSUN).
- The first example is text on a black background. Blue on black is bad and yellow on black is good.
- The second example is text on an orange background. Green on orange is bad and black on orange is good.
- The third example is text on a green background. Red on green is bad and black on green is good.
- The last example is text on a purple background. Gray on purple is bad, and white on purple is good.
Please see the following articles for more information on color contrast:
Links
All users will skim a page for links and headings. Similarly, users using a screen reader can jump from link to link by simply pressing the tab key. Having descriptive, informative, and organized links are important for all users.
- The link should be placed as text that clearly and uniquely describes where the link goes.
- Refrain from using "Click here" or "follow this link" as link titles, when a user is skimming an email, they will not understand the context of the link.
- Refrain from pasting the entire link URL into the body of the email. They are not very descriptive and screen readers will read the entire URL.
- Think about how to maximize the clickable area for your link.
- Smaller links create a smaller clickable area, which can create difficulties for individuals with vision and mobility impairments.
- For more information, visit this article from Harvard on how to write effective link text.
Inclusive Language
The Linguistic Society of America (LSA) in its Guidelines for Inclusive Language, defines inclusive language as “language that acknowledges diversity, conveys respect to all people, is sensitive to differences, and promotes equal opportunities.”
Inclusive language is language that intentionally reflects openness towards differences by avoiding references to race, gender, socioeconomic status, disability, age, sexual orientation, or other differentiators.
Some quick examples inclusive language include:
- Instead of "hey guys" or "hello ladies and gentlemen," use "hello everyone, folks, or all."
- Instead of "disabled or handicapped person," use "people with disabilities or person with a disability."
- Instead of "chairman," use "chairperson."
- Instead of "blacklist and whitelist," use "blocklist or denylist, and allowlist."
For more information and examples, read the Inclusive Language Guidelines from the American Psychological Association
Emojis
- Be mindful of not overusing emojis.
- Don't rely on emojis as the only method of conveying meaning.
- Add emojis to the end of a message instead of in between words.
- Don’t use an emoji to replace words.
- Avoid using emoticons, which are made up of punctuation and keyboard characters.
- Emoticons like this a smiley face ":)" is read as "colon, close parentheses" by a screen reader and loses its meaning.
Images
When including images in emails, there are several steps that should be taken to ensure they are accessible to users with disabilities. Many users also have images automatically turned off in their email clients privacy or bandwidth issues.
- Ensure all relevant information in an image is included in the body of the email. You should not rely on images alone to convey information.
Alternative Text
- Add alternative text to all images.
- Alt text should describe the image's meaning in the context of the email.
- Alt text does not need to be an exhaustive description of everything in the image, it should be concise and descriptive.
- Alt text should provide what value the image provides to the body of the email and shouldn’t duplicate the text in the body of the email.
- Alt text should not be the image's file name.
- The only exception is if an image is decorative and contains no meaningful information. You should leave the alt text empty. This will instruct screen readers to skip past the image. For example, an image of a dividing line is decorative.
- For more information, read this article from Harvard to learn more about writing effective alt text.
How to Add Alternative Text
- Outlook: Right-click on the image and select “Edit Alt Text…”
- Gmail: After adding an image, your image options will be displayed directly below the image. Select "Edit alt text" to add.
Please see the following articles for more information on alt text:
Images of Text
- Text displayed on an image may be difficult to read and will also not be read by a screen reader.
- If there is a need to use an image with text embedded on it (like in a banner or event poster), the text should also be present either in the email body text or in the alt text.
Animations and GIFs
- Avoid animations or GIF images that may be distracting.
- If an animation is used, make sure it does not contain any flashing or jarring animations that can cause photo-sensitive seizures in some individuals.
- Also, make sure the animation is accurately described in the alt text for visually impaired users.
Video and Audio
- When you embed a video or audio player in an email, make sure the video has accurate captions and transcripts for audio content.
- Ensure media player controls, such as play and stop, can be activated with a keyboard.
- Learn more about captions for videos and transcripts for audio content from Harvard Accessibility.
Layout
The most accessible email layouts should be simple and easy to read. Overly complex layouts can be difficult to read and make screen readers traverse the email out of order. Content should follow a logical order of elements when read.
- Single-column layouts are best. They will be displayed legibly on all platforms and devices.
- Keep paragraphs left aligned. Avoid using justification or right aligned paragraphs as they can be difficult to read.
- Avoid tables to create a layout. Tables as a layout component can be very confusing for users reading with assistive technology.
- Make sure there is sufficient space between lines in paragraphs for better readability.
Attachments
- If you need to attach a document, ensure that document is accessible.
- Documents are often not accessible and can be difficult to remediate.
- Before attaching a document to an email, try to determine if this is the best way to communicate the information. Could the information instead be simply added to the body of the email?
Using Email Templates
- Most major email applications and some third-party vendors will offer design templates for emails.
- Ensure you select a template that is simple and flexible. The template should follow the accessibility guidelines outlined in this article.
Testing for Accessibility
Microsoft Outlook has an accessibility Checker tool that you can utilize while composing an email. If any accessibility issues are found, the tool will explain potential problems that issue may cause for people with disabilities. Microsoft Support includes an article that outlines how to use the Outlook accessibility checker.
- While this is a reliable and helpful tool, any final accessibility checks should come down to you, the person composing the email.