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.
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?
“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.
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”?
“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
(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:
- Images – Success Criterion 1.1.1 Non-text Content – (Level A)
- Content Structure and Hierarchy – Success Criterion 1.3.1 Info and Relationships – (Level A)
- Content Sequence – Success Criterion 1.3.2 Meaningful Sequence – (Level A)
- Link and Button Colour – Success Criterion 1.3.3 Sensory Characteristics – (Level A)
- Colour Contrast – Success Criterion 1.4.3 Contrast (Minimum) – (Level AA)
- Text Spacing – Success Criterion 1.4.12 Text Spacing – (Level AA)
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:
- Animated Images – Success Criterion 2.3.1 Three Flashes or Below Threshold – (Level A)
- Document Title – Success Criterion 2.4.2 Page Titled – (Level A)
- Link Text (inside paragraph) – Success Criterion 2.4.4 Link Purpose (In Context) – (Level A)
- Headings – Success Criterion 2.4.6 Headings and Labels – (Level AA)
- Link and Button Text (outside paragraph) – Success Criterion 2.4.9 Link Purpose (Link Only) – (Level AAA)
- Link and Button Size – Success Criterion 2.5.5 Target Size – (Level AAA)
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:
- Language Attribute – Success Criterion 3.1.1 Language of Page – (Level A)
- Reading Level – Success Criterion 3.1.5 Reading Level – (Level AAA)
- Consistent Elements – Success Criterion 3.2.4 Consistent Identification – (Level AA)
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:
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:
-
ARIA6: Using aria-label to provide labels for objects – This technique refers to the use of object labels that can be read by assistive technologies. A common use in email is the implementation of
role="presentation"into each opening <table> tag.
- G196: Using a text alternative on one item within a group of images that describes all items in the group – This technique refers to content that combines multiple images.
- H2: Combining adjacent image and text links for the same resource – This technique refers to content that combines images and links.
- H37: Using alt attributes on img elements – This technique refers to content such as imagery. Therefore, it should be applied to each image in your email.
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
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
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
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.
