Accessibility in plain text email

Mark Robbins avatar
Mark Robbins@M_J_Robbins

When talking about plain text here we are referring to the text/plain; MIME type. This means there is no HTML at all. This is often confused with a simple text email, which is an HTML email, but with minimal styling, it’s just focused on the text.

The issue with plain text email

Plain text emails lack structure.

With HTML we can break the content up into manageable chunks. Looking at headings a user can quickly navigate to the relevant part of the email that they want to read. Paragraphs can help break text into more readable blocks. Bullet points can get a list of information out simply and quickly.

With good design this makes reading the content much easier and a more pleasant experience. With good semantic HTML structure, this can expand these benefits to people using assistive technology.

The more content there is in an email, the more import structure is. A very simple email may only be a short sentence or two, there the structure matters less.

How make plain text emails more accessible

To make plain text email accessible we need to try and replicate the structure that is missing as best as possible.

Paragraphs

A paragraph should have a single blank line space before it and after it. This will visually break up the text making it easier to read. This will also allow a screen reader to insert slight pauses between paragraphs.

T1: Using standard text formatting conventions for paragraphs

Lists

Lists can be indicated by starting each line with an indicator for the list. For an unordered list this could a symbol such as - or *. For an ordered list it could a number or letter other ordered indicator such as 1. a) i..

  • Always be consistent with your lists and stick to one style for the whole list.
  • For ordered lists make sure that the list is in sequential order with no gaps.

T2: Using standard text formatting conventions for lists

Headings

Heading can be indicated by having 2 blank lines before them and a single blank line after. This not only helps it stand out visually but can also be picked up by some assistive technology. It’s also good practice to keep headings short to help further differentiate them from paragraphs.

T3: Using standard text formatting conventions for headings

Although it’s not possible to add hyperlinks to HTML, it’s very common for URL’s to be automatically converted into a hyperlink.

To help the user understand the purpose of the link, it’s important to add text describing the link. This can be a couple of words placed in front of the link.

Try and keep links short, this can be hard when linking to a page nested deep in a website, or if there are a number of tracking parameters added to the link. So consider a link shortener, ideally one where you can set the text of the short link to help keep the link text descriptive.

Content

Don’t be afraid to simplify and shorten the message, some of the content may not be relevant in the plain text version it, is a very different format. In some cases it may help to think about it more like a longer SMS message.

Example

How make plain text emails more accessible

To make plain text email accessible we need to try and replicate the structure that is missing as best as possible. 


Paragraphs

A paragraph should have a single blank line space before it and after it. This will visually break up the text making it easier to read. This will also allow a screen reader to insert slight pauses between paragraphs.

WCAG techniques for paragraphs: https://www.w3.org/WAI/WCAG22/Techniques/text/T1


Lists

Lists can be indicated by starting each line with an indicator for the list. For an unordered list this could a symbol such as `-` or `*`. For an ordered list it could a number or letter other ordered indicator such as `1.` `a)` `i.`. 

- Always be consistent with your lists and stick to one style for the whole list.
- For ordered lists make sure that the list is in sequential order with no gaps.

WCAG techniques for lists: https://www.w3.org/WAI/WCAG22/Techniques/text/T2


Headings

Heading can be indicated by having 2 blank lines before them and a single blank line after. This not only helps it stand out visually but can also be picked up by some assistive technology. It’s also good practice to keep headings short to help further differentiate them from paragraphs.

WCAG techniques for headings: https://www.w3.org/WAI/WCAG22/Techniques/text/T3


Links

Although it’s not possible to add hyperlinks to HTML, it’s very common for URL’s to be automatically converted into a hyperlink.

To help the user understand the purpose of the link, it’s important to add text describing the link. This can be a couple of words placed in front of the link.

Try and keep links short, this can be hard when linking to a page nested deep in a website, or if there are a number of tracking parameters added to the link. So consider a link shortener, ideally one where you can set the text of the short link to help keep the link text descriptive. 


Content

Don’t be afraid to simplify and shorten the message, some of the content may not be relevant in the plain text version it, is a very different format. In some cases it may help to think about it more like a longer SMS message.