Advertisement
  1. Web Design
  2. Email
  3. Email Templates

How to Conform to WCAG (Web Content Accessibility Guidelines) in Email

Scroll to top

WCAG (the Web Content Accessibility Guidelines) make the web a more accessible place for everyone. They’re written for web content, not email content, but as the two have a lot in common, conforming to WCAG lays a good foundation for applying accessibility to email.

So, how do you conform to WCAG when developing email? In this tutorial, I’ll show you how!

1. Choose a WCAG Version

There are several versions of WCAG. The current version is WCAG 2.1, and it’s referred to as a ‘recommendation’. The next version will be WCAG 2.2, and this is currently referred to as a ‘working draft’. It’s due to become a recommendation soon.

wcagwcagwcag

While the W3C, the World Wide Web Consortium, the creators of WCAG, encourage the use of WCAG 2.2, most conform to WCAG 2.1. Indeed, WCAG 2.1 is the version that public sector websites and mobile apps in the UK must conform to by law.

What does “Conformance” Mean?

According to the W3C:

“Conformance to a standard means that you meet or satisfy the ‘requirements’ of the standard. In [WCAG 2.1] the ‘requirements’ are the Success Criteria. To conform to [WCAG 2.1], you need to satisfy the Success Criteria, that is, there is no content which violates the Success Criteria.”

2. Choose a WCAG Conformance Level

There are three levels of WCAG conformance – A, AA and AAA.

A is the lowest level of conformance, and AAA is the highest level of conformance. AA is the level that’s conformed to most. Indeed, AA is the level that public sector websites and mobile apps in the UK must conform to by law. If you claim to conform to AA, you must conform to A as well. It’s rare to see AAA conformed in full.

W3C WAI-AA WCAG 2.1W3C WAI-AA WCAG 2.1W3C WAI-AA WCAG 2.1
Conformance logo for WCAG 2.1 AA.

3. Familiarise Yourself with Each Success Criterion’s Conformance Level

Each guideline’s Success Criterion has been assigned a conformance level by the W3C – A, AA or AAA, which helps you identify which Success Criterion your email content needs to meet. For example, if you’ve chosen level A, your email content needs to meet all the relevant guidelines with a level A Success Criterion. If you’ve chosen level AA, your email content needs to meet all the relevant guidelines with a level A and a level AA Success Criterion. If you’ve chosen level AAA, your email content needs to meet all the relevant guidelines with a level A, a level AA and a level AAA Success Criterion.

What is a “Success Criterion”?

The W3C explains that

“For each guideline, testable success criteria are provided to allow [WCAG 2.1] to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in Understanding Levels of Conformance.”

To understand what the W3C’s explanation means, it’s helpful to look at an example of a Success Criterion. So, let’s look at Success Criterion 3.1.1 Language of Page:

Success Criterion 3.1.1 Language of Page.Success Criterion 3.1.1 Language of Page.Success Criterion 3.1.1 Language of Page.
Success Criterion 3.1.1 Language of Page as shown in WCAG 2.1.

Success Criterion 3.1.1 Language of Page

(Level A)

The default human language of each Web page can be programmatically determined.

As you can see, Success Criterion 3.1.1 Language of Page states its:

  • Number – 3.1.1
    • Denotes its ‘sub-guideline’ (my terminology), which in this example is number 1, within guideline number 1, within principle number 3 (which I’ll come to later)
  • Name – Language of Page
    • As we’re working with email, we can ‘translate’ this to mean ‘Language of Email’
  • Level – (Level A)
    • A level A Success Criterion, which has to be conformed to, as it’s the lowest level
  • Success criteria – The default human language of each Web page can be programmatically determined
    • These are the requirements for meeting this Success Criterion

You’ll note that there are two links – Understanding Language of Page and How to Meet Language of Page. These ‘Understanding’ and ‘How to Meet’ links accompany each Success Criterion and link to two useful documents to help you understand and meet each one.

4. Meet the Success Criterion for Each Piece of Content Within Your Email

Work through your email and meet the Success Criterion for each piece of content within it, reading the ‘Understanding’ and ‘How to Meet’ documents to help you. The guidelines have been broken down into four sections to help you identify which Success Criterion relates to which piece of content within your email. WCAG calls these sections ‘Principles’, and the ‘Principles’ are ‘Perceivable’, ‘Operable’, ‘Understandable’ and ‘Robust’, also known as POUR:

  • Perceivable guidelines deal with content your recipient perceives, such as images and text, and help you to make them visible and audible
  • Operable guidelines deal with content your recipient interacts with, such as links and buttons, and help you to make them easy to use
  • Understandable guidelines deal with content your recipient needs to understand, such as your emails text, and help you to make it understandable by considering language and reading age
  • Robust guidelines help you ensure your content can be accessed using a variety of user agents and assistive technologies, such as email clients, webmail clients, apps and screen readers on mobile, laptop and desktop devices

Let’s look at each principle and the content their guidelines apply to in a little more detail.

Perceivable

There are four guidelines within ‘Perceivable’, each with their own ‘sub-guidelines’. They are ‘Text Alternatives’, ‘Time-based Media’, ‘Adaptable’ and ‘Distinguishable’. The email content they apply to, in the order they appear, include:

Operable

There are five guidelines within ‘Operable’, each with their own ‘sub-guidelines’. They are ‘Keyboard Accessible’, ‘Enough Time’, ‘Seizures and Physical Reactions’, ‘Navigable’ and ‘Input Modalities’. The email content they apply to, in the order they appear, include:

info
Calling out copy. Copy (words) often get overlooked, but the W3C provides some useful tips for writing for accessibility.

Understandable

There are three guidelines within ‘Understandable’, each with their own ‘sub-guidelines’. They are ‘Readable’, ‘Predictable’ and ‘Input Assistance’. The email content they apply to, in the order they appear, include:

Robust

There is one guideline – ‘Compatible’ – within ‘Robust’, with its own ‘sub-guidelines’.

5. Techniques to Help You Meet Each Success Criterion

Within the ‘How to Meet’ documents that accompany each Success Criterion are listed the techniques that can be used to meet them. Not all the techniques need to be used. Only the ones relevant to the content and relevant to email.

The techniques relevant to email are ‘General’, ‘ARIA’, ‘HTML’, ‘CSS’ and ‘Failure’. The techniques not relevant to email are ‘Flash’, ‘PDF’ and ‘Silverlight’. In the documents, the techniques are prefixed with the appropriate technique type, making it easy to identify each one:

  • G: General
  • ARIA: Aria
  • FLASH: Flash
  • H: HTML
  • C: CSS
  • PDF: PDF
  • SL: Silverlight
  • F: Failure

To understand how the prefixes are applied, it’s helpful to look at a ‘How to Meet’ document. So, let’s look at Success Criterion .1.1 Non-text Content:

1.1.1 Non-text Content – Level A.1.1.1 Non-text Content – Level A.1.1.1 Non-text Content – Level A.
Excerpt from 1.1.1 Non-text Content ‘How to Meet’ document.

You can meet this Success Criterion using General, ARIA, Flash, HTML, PDF and Silverlight techniques, indicated by their prefixes. Of these, General, ARIA and HTML are relevant to email.

6. Situations to Help You Determine the Technique

Some techniques sit under situations to help you determine the appropriate technique for your content.

The techniques for Success Criterion .1.1 Non-text Content sit under six situations, labelled A-F. The first situation in this example is ‘Situation A: If a short description can serve the same purpose and present the same information as the non-text content’, and its email relevant techniques are as follows:

The other techniques that sit under Situation A, such as Flash and Silverlight, have no relevance to email.

7. Tools to Help You Test Your Email’s Accessibility

There are several tools that will help you test your email’s accessibility. Let’s look at a few of them:

WAVE Web Accessibility Evaluation Tool

WAVE Web Accessibility Evaluation Tool

WAVE – Web Accessibility Evaluation Tool.WAVE – Web Accessibility Evaluation Tool.WAVE – Web Accessibility Evaluation Tool.
WAVE – Web Accessibility Evaluation Tool.

The ‘WAVE Web Accessibility Evaluation Tool’ provides snapshots of web page accessibility, and it can be used to provide snapshots of email accessibility too. Simply insert the emails ‘View in browser’ URL into the ‘Web page address’ field.

The tool features five tabs – ‘Summary’‘Details’‘Reference’‘Structure’‘Contrast’. Each tab contains a report on its accessibility.

Summary

A brief report. It presents the number of ‘Errors’, ‘Alerts’, ‘Structural Elements’, ‘Contrast Errors’, ‘Features’ and the use of ARIA.

Details

A detailed report. It presents the number of ‘Errors’, ‘Alerts’, ‘Structural Elements’, ‘Contrast Errors’, ‘Features’ and the use of ARIA, listing each one. Accompanying each one is a useful information icon, which, when selected, opens up a ‘Reference’ tab, providing contextual information about that specific piece of content, including references to WCAG.  

Reference

Presents valuable information about the item that you select within the ‘Details’ tab. It explains ‘What it Means’, ‘Why it Matters’, ‘What to Do’, ‘The Algorithm… in English’ and ‘Standards and Guidelines’. The latter cross-references its own ‘WCAG 2 Checklist’.

Structure

Presents any HTML sectioning elements (e.g. <main>, <nav>, <aside>, <header>, <footer>), and heading hierarchy. If there isn’t a structure (as I’ve found on multiple emails I’ve looked at), it simply states, ‘This page has no heading structure!’.

Contrast

Presents colour contrast failures it identifies, measured against WCAG 2.1 A and WCAG 2.1 AAA. The sliders within this tab allow you to adjust the colours to colours that pass, which you can then apply to your CSS.

Finally, you can switch styles on and off to understand whether the content follows a meaningful sequence as per Success Criterion 1.3.2 Meaningful Sequence.

WebAIM Contrast Checker

WebAIM Contrast Checker

WebAIM Contrast Checker passing foreground and background colour test against WCAG 2.1 AA and WCAG 2.1 AAA.WebAIM Contrast Checker passing foreground and background colour test against WCAG 2.1 AA and WCAG 2.1 AAA.WebAIM Contrast Checker passing foreground and background colour test against WCAG 2.1 AA and WCAG 2.1 AAA.
WebAIM Contrast Checker.

The WebAIM Contrast Checker is the same tool as the one ‘built-in’ to the ‘WAVE Web Accessibility Evaluation Tool’, except that you have to insert the hexadecimal colour codes manually.

accessible-email.org

https://www.accessible-email.org

accessible-email.org email accessibility evaluation tool, showing option to test using HTML or URL.accessible-email.org email accessibility evaluation tool, showing option to test using HTML or URL.accessible-email.org email accessibility evaluation tool, showing option to test using HTML or URL.
accessible-email.org Email Accessibility Evaluation Tool.

Built by Maarten Lierop and Jordie van Rijn, this email accessibility evaluation tool allows you to validate an email before it’s sent, by inserting its HTML, and after it’s sent, by inserting its ‘View in browser’ URL. Like the WAVE Web Accessibility Evaluation Tool, it presents a valuable report.

In Summary

As you’ve seen, conforming to WCAG in email requires effort. However, if you follow the process I’ve outlined in this tutorial, you’ll achieve it with minimised effort. I’ll leave you with a summary of that process:

  • Choose a WCAG version – I recommend WCAG 2.1 until WCAG 2.2 becomes a recommendation.
  • Choose a conformance level – I recommend AA, but if you can meet AAA with any of your content, do so.
  • Become familiar with the Success Criterion – The more familiar you become with them, the easier it will be to apply WCAG to your content
  • Use appropriate techniques – Only use the techniques appropriate to your content – you don’t need to use Flash techniques on an email!
  • Use tools – Tools will help you evaluate the conformance of your email.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.