{"id":71320,"date":"2022-01-26T19:00:00","date_gmt":"2022-01-26T08:00:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=43527"},"modified":"2025-11-11T17:46:58","modified_gmt":"2025-11-11T06:46:58","slug":"how-to-conform-to-wcag-web-content-accessibility-guidelines-in-email","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/how-to-conform-to-wcag-web-content-accessibility-guidelines-in-email","title":{"rendered":"How to Conform to WCAG (Web Content Accessibility Guidelines) in Email"},"content":{"rendered":"\n

WCAG<\/a> (the Web Content Accessibility Guidelines) make the web a more accessible place for everyone. They\u2019re 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.<\/p>\n\n\n\n

How do you conform to WCAG when developing email? In this tutorial, I\u2019ll show you how!<\/p>\n\n\n\n

1. Choose a WCAG Version<\/h2>\n\n\n\n

There are several versions of WCAG. The current version is WCAG 2.1, and it\u2019s referred to as a \u2018recommendation\u2019. The next version will be WCAG 2.2, and this is currently referred to as a \u2018working draft\u2019. It\u2019s due to become a recommendation soon.<\/p>\n\n\n\n

\"WCAG<\/figure>\n\n\n\n

While the World Wide Web Consortium (W3C), 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.<\/p>\n\n\n\n

What Does \u201cConformance\u201d Mean?<\/h3>\n\n\n\n

According to the W3C<\/a>:<\/p>\n\n\n\n

\n

\u201cConformance to a standard means that you meet or satisfy the \u2018requirements\u2019 of the standard. In [WCAG 2.1] the \u2018requirements\u2019 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.\u201d<\/p>\n<\/blockquote>\n\n\n\n

2. Choose a WCAG Conformance Level<\/h2>\n\n\n\n

There are three levels of WCAG conformance: A, AA, and AAA.<\/p>\n\n\n\n

A is the lowest level of conformance, and AAA is the highest level of conformance. AA is the level that\u2019s conformed to the 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\u2019s rare to see AAA conformed to in full.<\/p>\n\n\n\n

\"Conformance
Conformance logo for WCAG 2.1 AA.<\/figcaption><\/figure>\n\n\n\n

3. Familiarize Yourself With Each Success Criterion\u2019s Conformance Level<\/h2>\n\n\n\n

Each guideline\u2019s 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\u2019ve chosen level A, your email content needs to meet all the relevant guidelines with a level A Success Criterion. If you\u2019ve 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\u2019ve 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.<\/p>\n\n\n\n

What Is a \u201cSuccess Criterion\u201d?<\/h3>\n\n\n\n

The W3C explains that<\/a>:<\/p>\n\n\n\n

\n

\u201cFor 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<\/a>.\u201d<\/p>\n<\/blockquote>\n\n\n\n

To understand what the W3C\u2019s explanation means, it\u2019s helpful to look at an example of a Success Criterion. So let\u2019s look at Success Criterion 3.1.1 Language of Page<\/a>:<\/p>\n\n\n\n

\"Success
Success Criterion 3.1.1 Language of Page as shown in WCAG 2.1.<\/figcaption><\/figure>\n\n\n\n

Success Criterion 3.1.1 Language of Page<\/strong><\/h4>\n\n\n\n

(Level A)<\/p>\n\n\n\n