Creating accessible emails

Whichever email platform you use, you can take steps to make your emails accessible so that they can be used and understood by everyone.

What email accessibility is

Digital accessibility means creating content that can be understood and used by all. Public sector organisations (like universities) must adhere to the Web Content Accessibility Guidelines (WCAG) by law. As more people use emails (and other digital technologies) to communicate important information, it has become imperative that accessibility guidelines are followed for all digital content.

Users can have a range of different needs and may use assistive technology to read your emails. For example, a person who is visually impaired may use a screen reader to navigate your email.

How to make your emails accessible

To make your emails accessible to all, you can follow the guidelines below.

Headers

You should ensure:

  • the main header of the email is marked as a header 1 (H1)
  • the sub headers are marked as header 2s (H2)
  • any subsequent headers within the H2s are marked as header 3s (H3)
  • if you need to start a new section return to an H2 header.

Don’t use images of text as headers. This is because:

  • a screen reader is unable to read the header text
  • you can’t mark the header as an H1
  • if a user disables images they won’t see the header of the page.

Using alt-text is not a suitable alternative because:

  • the alternative description is there to describe the action in an image, and not to convey text meaning
  • you cannot mark images as H1s meaning, vital page structure is missing for screen readers.

Colour contrast

Ensure colour contrast requirements are met for text on colour backgrounds.

For regular sized text, the contrast should be 4.3:1.

For larger text, such as headers, it should be 3:1.

You can check if your design is meeting colour contrast requirements by using online tools such as WebAIM Colour Contrast Checker.

You must only use University branded colours.

It is also best practice to not overlay text directly on to images – even if you are meeting colour contrast requirements, it is difficult to see text with an image directly behind it. Instead put a colour box over the image and then lay text over the colour box.

Link text

Don’t use link text like ‘click here’ or ‘go here.’ Links should convey clear and accurate information about the link’s destination. Instead use descriptive links such as ‘Find out about our undergraduate courses.’

As a general rule, link text should still make sense, even if you removed it from the paragraph it is in and placed it on the page on its own.

Justification 

Make sure your content is left aligned and not centred. It is fine for headers to sit in the centre.

Alternative descriptions

Make sure images embedded in the email template have alt-text. Alt text should describe what is happening in the image. It should be short, meaningful and no longer than 26 words. If your image is decorative only, you can mark this in the code using alt=””.

If you are embedding video or audio into your email, it must have a full text alternative. This is usually a transcript which can be placed in a drop down underneath the video. The video should also have subtitles. Even if you link across to a video on a webpage, you must ensure the webpage contains a transcript and subtitles for the video.

Remember:

  • don’t hide information in images
  • don’t use images of text.

Accessible language and structure 

You should:

  • write simply and clearly. You can check the readability of your content using online tools
  • use Arial font style, with text size no smaller than 12pts
  • avoid using all capital letters or italic letters in sentences and headers. You must only use underlined words for text links
  • use a single column (instead of multiple)
  • ensure the email has a language attribute set
  • make sure the subject line of the email is relevant to the email content.

Find out more about how to write well.

Tables 

Most email clients use a table structure for content. If this is being used, you should ensure all presentation tables that are holding content the user needs to read are using the role “presentation” in the html.

For example: role=”presentation”.

Only add this tag to each table element and not every <td>.

Example layout

See an example layout of an accessible email.

Next steps

When you have created your email following the above guidelines, you can contact the Digital and Creative Media team who can:

  • run tests to check accessibility guidelines are being met and advise on any needed adjustments
  • use assistive technology such as screen readers to check the email is being read correctly
  • ensure brand guidelines are being met
  • provide sign off to show digital accessibility and brand guidelines have been met (if needed).

Contact

If you have any queries, email dcm@sussex.ac.uk.

You might also be interested in: