Create Accessible E-mails in Outlook

It's important to keep in mind accessibility when creating e-mails. Accessibility equals usability as often our design choices can impact everyone.

Content Design Best Practices

  • Left align, left align, left align.
  • Use a 12 point or larger font.  Recommended font: Arial.
  • Do not use underlines or italics.  Underlines are easily confused with hyperlinks when someone has a cognitive or visual disability.  Words in italics bring the letters of the word closer together, making the word harder to read for someone that has a cognitive disability.  Bold is the way to go.  
  • Ensure that color is not the only means of conveying information. The color red is jarring and draws attention to content immediately for many readers. However, if any of your readers are colorblind, they won't see the red. Instead, use bold and a label such as "important" to draw attention to the content or use it in unison with the red text.
  • Use built in heading and bullet styling. Headings should be used in a semantic structure. Heading 2s for main headers within the e-mail and Heading 3s for any sub-sections if applicable.  
  • Add a flyer as content, not as an image.  Flyers often contain contact information and links to web content.  When you convert a flyer into an image in the body of an e-mail, the content becomes inaccessible to all.  It's easy to create the same look and feel through e-mail or you can copy paste a word flyer in through html.  If you opt to attach the flyer as a PDF instead, ensure that the PDF is accessible.

Add Alt Text to Images

Once you add an image to an e-mail in Outlook, you should add alt text to that image. Alt text describes the image in a brief manner (125 character max). For example, a picture of two people in a research lab looking into a microscope would have that description as its alt text. Alt text both provides a non-sighted user with what the image is trying to convey as well as someone who has images blocked when receiving external e-mails. If you need to provide a paragraph for context (for example, you are trying to convey a graph or chart that has been converted to an image), then you can provide brief alt text stating it's a graph of year over year traffic to the public-facing website and then provide a more detailed description below the image.

  1. Right click the image.
  2. Select Format Picture. A pop-up window will open. Select the Layout & Properties icon under the Format Picture title (when you hover over all four icons, they are labeled accordingly).  
  3. Select the Alt Text option.
  4. Enter your alt text under the description (keeping to 140 characters or less).

Create Meaningful Hyperlink Text

Ensure that when you are adding a hyperlink, you provide descriptive text and embed the hyperlink within the text. For example, if you are sending someone to the HR Website at the end of an e-mail, the hyperlink descriptive name would be HR Website. Avoid adding full links to an e-mail body as well as using words such as Click here. Click here or Learn more are not informative enough when quickly scanning an e-mail as many readers do and also provides no context for someone using a screen reader (users of assistive technology will often skim an email by tabbing through the links rather just as any user would scan an e-mail visually).

  1. Highlight the descriptive text that you want to make into a hyperlink.
  2. Select the Add a Hyperlink icon. The Insert Hyperlink pop-up window will open.
  3. Enter the hyperlink in the Address box.  
  4. Select the OK button.

    Last Updated

    Kelly Weeks
    July 28, 2019