Developing HTML emails to be more accessible.

View the accessibility style switcher

Type E:

04. The Accessibility Issue

♿ Friendly.

It’s extremely rare that an email’s designed with accessibility in mind. As email designers and developers, we often assume that the techniques we’re forced to employ to ensure our emails render consistently across as many email and webmail clients as possible are incompatible with accessibility. It’s possible, however, to develop emails with a level of accessibility, using HTML typography. In this issue, I’ll look at four ways of implementing it.

1. Use semantic tags.

Semantic tags (<h1>, <h2>, <h3> and <p> etc.) help subscribers using screen reading software, such as JAWS and VoiceOver, distinguish headings, and different levels of heading from paragraphs of text.

Semantic heading and paragraph 

												<h1>Heading</h1>
	 
												<p>Paragraph of text.</p>

Styling semantic headings

On headings, apply their styling inside each opening <h> tag. Add mso-line-height-rule:exactly; to maintain the line-height on Microsoft Outlook, and margin:0; to reset the margin.

												<h1 style="font-family:Arial, sans-serif; font-size:40px; line-height:45px; mso-line-height-rule:exactly; color:#ee0000; margin:0;">Heading</h1>
											

Styling semantic paragraphs

On paragraphs, first apply their styling inside the opening <td> tag of the table cell that contains them, as follows:

												<td style="font-family:Arial, sans-serif; font-size:14px; line-height:21px; color:#666666;">
											

Then apply a style of margin:0; inside each opening <p> tag.

												<p style="margin:0;">
											

Troublesome Tags

While semantic tags provide a greater understanding of the hierarchy of an emails content, they’re often avoided, as some email and webmail clients apply their own styling to these elements, resulting in poor rendering

margin is one particular style that tends to be applied to semantic tags, resulting in bloated spacing, particularly around headings. The way to fix this is to reset the style by applying margin:0; inside the opening tag.

2. Style paragraphs with a font-size of 14px.

Style paragraphs with a font-size of 14px, and as a guide, style line-height at one and a half times the font size, depending on the font. Fonts with a smaller x-height won’t require as much line-height, as there’s already more relative space between the x-height and the cap height, and conversely, fonts with a larger x-height may require more. You can also use the percent unit for line-height (line-height:150%; for example) though you’ll see some rendering inconsistencies on Microsoft Outlook.

												<p style="font-family:Arial, sans-serif; font-size:14px; line-height:21px; color:#000000;">14px paragraph of text.</p>
											

Type Anatomy

x-height & cap height

x-height
Cap height

3. Align body text left (even on mobile).

Paragraphs of text are much easier to read when they’re aligned left, as the eye has a reference point to start reading each new line. There’s a tendency to centre paragraphs of text on mobile, and while this is acceptable on headings and buttons, it’s difficult to read on other types of text.

4. Check your colour contrast ratio.

Check the contrast ratio of your text and background colours using a colour contrast tool. Some colours, white on yellow for instance, might be obvious no, no’s, but some colour combinations have more subtle contrast issues.

Testing for Colour Contrast

webaim.org features a really useful colour contrast tool, amongst a host of other resources on all things accessible. Of particular use to email designers and developers are the:

Of course, you can go much further with making your emails more accessible. How far you go very much depends on your audience. It’s important to remember, that any effort to make your emails more accessible will benefit all your subscribers, and that’s got to be a good thing!

												Type E: is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to type-e@beyondtheenvelope.co.uk. Thank you for subscribing!
											

Beyond the Envelope™

Unsubscribe:
Please don’t make me cry! :(