Tips for an Accessible Email

We all use email to deliver messages.  We need to remember that some of the emails will be read using screen readers or text to speech software, so these email messages need to be accessible.

Here are some quick tips for making your email accessible:

  • Subject lines matter.
    If you are using a screen reader you want to make sure the email is worth reading. Otherwise it will get deleted!
  • Use Headers.
    • Many screen readers can list all headings on a page (generally with one keystroke) and offer the ability to jump between headings/sections
    • Always use Headings in order
      — don’t skip headings
      — don’t  use a Heading 3 (H3) without first using a Heading 2 (H2)
  • Use contrasting colors for backgrounds and text.
    • Some users have difficulty perceiving text if there is too little contrast between the text and the background.
    • Text and background must have a contrast ratio of at least 4.5:1 (or 3:1 for large text – 14pt bold or 18 pt not bold)
    • Wesleyan’s red & black can both be used on a white background
      but —
      red can not be used on black and black can not be used on red
    • free tools allow you to check the color contrast
  • Use meaningful link text.
    • Link text should be meaningful when read out of context.
      For example, links like “click here” and “Read more” are meaningless out of context.
    • Clear short descriptions make it easier for users to find links
      • For example:
        change Read More   — to — Read More in the Course Catalog
        change Click Here — to be descriptive to your destination — Course Catalog
  • Use helpful description in ALT Tags within your images.
    • Screen Reader software can not “see” an image in an email — so the image needs to be “coded” in a way for the software to be aware of it and know how to handle it
    • adding an alt tag will “code” the image for a screen reader to see
    • all text within an image must be in the alt text
    • avoiding using images of text if you expect the text to be read by the user, unless it’s necessary such as in a logo or brand name, in which case the alt text should be the same as the text in the image.