Creating Accessible Emails

Accessible email planning and design improves usability for everyone on your mailing list. Accessible email practices include writing, designing, and coding emails that people can easily understand and engage with regardless of their physical or mental constraints. This includes optimizing emails for assistive technology.

Planning Your Campaigns

Planning accessible emails from the very start of the campaign is crucial. Marketers, designers, and IT professionals all need to work together to present an email that truly meets the needs of all users.

  • Marketers write copy that is inclusive and conducive to semantic structures.
  • Designers craft images and text styles that meet color contrast thresholds
  • As programmers and IT professionals code the proper semantic structures, lables, and attributes into our email components.

Planning Your Content

Be Empathetic & User Focused

User-focused content helps users:

  • Find what they need.
  • Understand what they find.
  • Use what they find to meet their needs.
  • Feel like their needs are respected.

Build for accessibility and inclusion

We’re committed to:

  • Building digital experiences for people of all abilities.
  • Addressing readers needs with focused, intentional content.

Be concise, simple, and clear

Our goals are to:

  • Help them find what they need with ease.
  • Remove information that distracts from completing key tasks.
  • Simplify our language.

Be consistent

Communicate with purpose

  • We are intentional in our messaging.
  • We use clear calls to action.
Content Hierarchy

Design for easy reading

Readers scan content!

Make content scannable

  • Help readers find what they need with ease
  • Remove information that distracts from completing key tasks
  • Simplify our language
  • Make use of bulleted lists, headings, and other semantic structrues
  • Break content into smaller, bite-sized chunks of content makes it easy for users to scan different topics on a page.
  • Use keywords at the beginning of a paragraph or sentence
  • Use short paragraphs

Written Content Best Practices

When writing, we will:

  • Think about the tasks they want to complete.
  • Put the most important information first.
  • Consider and respect everyone who visits our site.
  • Be human-centered first, then data-driven.

Good written content:

  • Uses inclusive, plain language.
  • Starts broad and gets more specific.
  • Communicates with empathy and purpose.
  • Uses a values-based approach.
Plain Language

Plain language benefits

  • Easier to understand.
  • Readersmake fewer mistakes.
  • Readers find answers more quickly.
  • Readers need less assistance.
  • Improves accessibility, inclusivity, search-ability, readability, and scaleability.

Guidelines

Be Clear and Concise

  • Use short, meaningful headings.
  • Stick to one idea per paragraph.
  • Use keywords in the beginning of each paragraph.
  • Use simple sentence structures and simpler language.
  • Be concise, simple and clear – less is more.
    e.g., “Use” vs. “Utilize”; “If” vs. “In the event of”
  • Avoid slang, jargon, clever, or humorous language.
  • Avoid repetition.
  • Be consistent.
  • Write at an 8th grade reading level (https://hemingwayapp.com.)
  • Aim for a Microsoft Word readability score of 70 or greater.

Be Conversational and Approachable

  • Write in informational, active voice
    Pro tip: if you can add “by zombies” to the end of a sentence, you’re using passive voice.
    Examples
    Passive: The course was offered by the department of Animal Sciences in 2021.
    Active: We offered the class in 2021.
  • Write positively
  • Use I, you, we, and us pronouns.
  • Use “you” statements
  • Use inclusive language
  • Guide readers through the information
  • Write for your audience, not experts.
    Assume your audience is new to the subject, avoid jargon or overly technical terms

Be Service-driven

  • Think about the questions readers might ask by putting ourselves in their shoes.
  • Use clear calls to action.
  • Use headings, lists, and other semantic structures to help readers navigate.
  • List resources in order of importance.
Inclusive Language

Principles to Remember

  • Put people first:
    It is essential to focus on the person, not their characteristics.(e.g., woman who is blind vs. blind woman.)
  • We are more than our descriptors:
    Avoid generalizations and don’t assume someone’s identity unless relevant to the discussion, like inviting women students to meet your women in leadership at a STEM networking event.
  • Use universal phrases:
    Idioms, industry jargon, and acronyms can exclude a candidate who may not have specialized knowledge of a particular subject and can lead to miscommunication. Plus, many idioms don’t translate well globally across languages or countries.
  • Use gender-neutral language:
    Inclusive ways to address a group: e.g., folks, people,team.
    Inclusive verbs and adjectives: e.g., human-man, firefighter, partner.
  • Recognize the impact of mental health language:
    “Bipolar,” “PTSD,” “OCD,” and “ADD” are real mental health diagnoses that people possess. Avoid other derogatory terms that stem from the context of mental health, like “schizo,” “paranoid,” “psycho,” “crazy” or “insane.
  • Educate Yourself and Ask if you aren’t sure:
    Inclusive language is nuanced and is meant to reflect an individual’s or group’s personal style and preference. 

Source: Handshake.com

Resource: apstylebook.com

Link Text
  • Pretend someone is reading this to you and you can’t see it. Does the link text make sense?
  • Put keywords at the beginning of the link phrase.
  • Search your page for “Click Here” – You shouldn’t find it. Please reword your link.
  • Don’t spell out full urls in your text unless:
    – you are trying to get the users to memorize a short url
    – you are using an email link, in which case, spell out the email address in addition to linking it

Resource: plainlanguage.gov

Alternative Text
  • Describe how the contents of image relates to written content.
  • Add alt text to all non-decorative images.
  • If an image is decorative without contextual meaning, check the box as “decorative.” You can use “” to indicate a decorative image in Outlook.
  • Don’t include “image of” or “photo of”.
  • Complex alt text descriptions may be used to explain infographics, charts, or graphs, but a better practice is to present the information using a semantic element like a list or paragraph.
  • For images that serve as links, alt text should be the link description.
  • Hide or remove your image and read the alt text to see if it fits.

Resource: WebAIM.org

Visual Content Best Practices

Images and Styles

Images

Images are a great way to break up sections of text and enhance the design of an email. However, there are some image guidelines.

  • Avoid embedding text in images
    – The copy in your email should be live text, not text embedded in an image as screen readers cannot detect it.
    – If you have embedded text in an image, be sure to define that text within your email body copy below the image. Use short, descriptive alt text for the image.
  • Always add alternative text
    If you use a branded header or banner image, spell out the words in the image for the alt text.

Fonts

  • Sans serif fonts like Source Sans Pro, Arial, and Calibri are easier to read.
  • Avoiding using all caps and excessive italics, or underlines.
  • Keep text at a reasonable size, no lower than 11 or 12 points (14 or 16 pixels, points to Pixels converter.)
  • Ensure perceivable differentiation between all heading and paragraph styles.
  • Ensure sufficient line spacing. Use built-in styling tools rather than extra returns.
  • Underline hyperlinked text.
  • Create bold and/or larger headings for easy scanning.

Color Contrast

  • Use high-contrast color schemes on opposite ends of the color spectrum for readability, such as white and black.
    • Avoid using color alone to convey meaning. Use color along with a secondary element, such as shape or text differences.
  • Use color contrast checkers, such as this Color Checker.
  • For standard texts:
    size less than 24px: contrast of 4.5:1 minimum
    size greater than or equal to 24px: contrast of 3:1 minimum
  • For bold texts:
    size less than 18.5px: contrast of 4.5:1 minimum
    size greater than or equal to 18.5px: contrast of 3:1 minimum
  • For non-underlined links
    contrast of 3:1 minimum with the surrounding text and with the background color

Email Design Best Practices

Building an Email

Once we have crafted accessible, inclusive content, our next step is to build and style our email. To do this, we utilize semantic structures and styles.

Semantic Structure

Using semantic structure provides an organized hierarchy for your content. This makes it easier for users with assistive technologies, such as screen readers, to navigate and understand information. The email content hierarchy should be established through the use of headings, subheadings, and other organizational elements.

Headings

  • Headings should be scannable and explain what an email section is about. Heading text should be clear and concise.
  • Headings should be organized in a structured, semantic order.
    • Use the built-in heading styles in both Webtools and Outlook with descriptive heading texts to make it easier for screen reader users to determine the structure of the message and navigate the headings.
    • Think of your document like an outline for an essay.
      • Heading 1 (h1) should be the page title. There is only one title or Heading 1 on a page. 
      • The next level down would be Heading 2 (h2). Under those headings, you would use H3, etc. 
      • Headings must go in sequential order. You can have multiple Headings 2-6.

Lists

Lists are a great way to break up longer pieces of text.

  • Bulleted lists are used for lists with no important order.
  • Numbered lists used are for specifically ordered lists.

Paragraphs 

Paragraph Text Style
  • Align text to the left instead of centered or justified.
  • Use paragraphs with headings. 
  • Break up text into short paragraphs.
    • Add additional spacing between sentences and paragraphs to reduce the reading load. Use built-in email spacer tools, NOT extra returns.
  • Write descriptive hyperlink text. People who use screen readers can sometimes scan a list of links, so they should convey clear and accurate information about the destination.
    • Don’t use link texts such as “Click here” or ‘Learn more.” Use the title of the destination page or keywords from the destination page, not the full page url.
Paragraph Banners
  • Use paragraph banners to separate content visually with full-width, highlighted text.
  • Make sure your highlight color and text color pass contrast guidelines.

Tables

Tables should be used to convey tabular data only and not as a tool to lay out the design of your email. Consider using lists and paragraph options to present information.

If you do use tables, please follow these guidelines:

  • Avoid fixed width tables.
  • Don’t combine separate tables.
  • Edit any existing hyperlink texts so that they are clear and don’t break mid-sentence.
  • Use table titles, captions, alt text, and headers.
    • Use table headers. Screen readers use header information to identify rows and columns, and to keep track of their location in a table.
  • Ensure there are no blank cells.
  • If you must use tables to layout your email, add the attribute <table role=”presentation”> on every table element (this is for non-tabular data only.)

Attaching Documents

  • Describe the content of an image with text in the email.
  • If you do attach a file to an email, make sure the document is accessible. Learn more about the law and this process with these IT Accessibility Document Accessibility tips.
  • If the information could simply be added to the body of the email as text, then consider doing this instead of attaching documents.

Other Tips

  • Avoid animation as auto-playing animations and videos can be distracting.
  • Use text for your name and contact information in email signatures.
    • Adding a logo is okay, but be sure to add alternative text for the logo.
    • Use captions and transcripts for videos.

Additional Resources

Get Help from Trusted Sources

Outlook’s Accessibility Checker

  • Will review your content and flag accessibility issues it comes across.
  • Will explain each issue and suggest how to resolve it.
  • Allow it to notify you of potential accessibility issues while you work:
    • Select File > Options > Accessibility
    • Select that you want to see notifications through a MailTip while you work
  • To test a Webtools email, send a draft to your Outlook account to use Outlook tools.

Outlook Immersive Reader

  • Try reading the email with Immersive Reader to check how it sounds.
  • Message > Immersive Reader > Read Aloud

Request Accessible Emails

Let people know that you prefer to receive accessible content.

  • In Outlook:
    Account details > File > Info > Account Settings > Access this account on the web
    Outlook then will open in your browser
    Accessibility Settings > Select the settings icon > General > Accessibility
    Select the ‘Ask senders to send content that’s accessible’ checkbox.

More Resources

Checklist for Accessible Emails

  • Write email subject lines, headings, sentences, and paragraphs that are clear and concise.
  • List resources in order of importance.
  • Stick to one idea per paragraph with keywords at the beginning.
  • Use simple sentence structures, plain language, and active voice.
  • Write at an 8th-grade level.
  • Avoid repetition.
  • Avoid jargon, humor, slang, and industry terms.
  • Use I, you, we, and us.
  • Use descriptive hyperlinks (not “click here”.)
  • Use alt text with all images.
  • Do not embed meaningful text in images.
  • Use high contrast colors for text.
  • Use semantic elements to lay out your email, not tables.
  • Describe attachment contents in body of email.

Demos