InTwelve™ — Create accessible HTML email elements in twelve stages.

Create accessible HTML emails, with InTwelve™. InTwelve™ is a tool that helps you walk you through the Web Content Accessibility Guidelines (WCAG), in twelve stages, one email element at a time, starting with Stage 1.

1

Stage 1:

Select the piece of content you want to ensure is conformant to the Web Content Accessibility Guidelines (WCAG).

Example: Headline.

Next
2

Stage 2:

Identify within the WCAG, the Success Criteria (SC) that’s relevant to your piece of content.

Example: Success Criterion 2.4.6 Headings and Labels (Level AA).

Next
3

Stage 3:

List the relevant Success Criteria (SC) for your piece of content.

  • Check for all relevant Success Criteria (SC) for your piece of content.
  • Add them to your list.

Finalise your list of Success Criteria (SC).

Example:

Next
4

Stage 4:

Select a Success Criterion (SC) to work on.

Example:

Next
5

Stage 5:

Designate an appropriate owner or owners for your Success Criterion (SC). One of, or a combination of, the following:

  • Copywriter
  • Creative
  • Coder

Example:

  • Copywriter
  • Coder
Next
6

Stage 6:

Interpret your Success Criterion (SC) for HTML email content.

  • Refer to the WCAG ‘Show techniques and failures for…’, ‘Sufficient Techniques’ and ‘Situation…’ documents for that Success Criterion (SC) by selecting ‘How to Meet’.

Example: How to Meet Headings and Labels.

Next
7

Stage 7:

Check if your Success Criterion (SC) is Level A, AA or AAA.

  • If it’s Level A or AA, conformance to WCAG may be legally required.
  • If it’s Level AAA, conformance to WCAG may not be legally required, but you may want conform to it to enhance your emails accessibility.

Example: Success Criterion 2.4.6 Headings and Labels (Level AA).

Next
8

Stage 8:

Select the relevant technique you need to use to meet your Success Criterion (SC).

  • Refer to the WCAG ‘Show techniques and failures for…’, ‘Sufficient Techniques’ and ‘Situation…’ documents for that Success Criterion (SC) by selecting ‘How to Meet’.

Example: Technique G130: Providing descriptive headings.

Next
9

Stage 9:

Implement the technique you’ve selected to conform to your Success Criterion (SC).

The techniques relevant to HTML email are:

  • General (G)
  • HTML (H)
  • CSS (C)

Example: General (G): Technique G130: Providing descriptive headings.

Next
10

Stage 10:

Test the implementation of your selected technique on your piece of content to ensure it conforms to the WCAG, and it’s accessible.

  • Use the tests, within the relevant WCAG ‘Show techniques and failures for…’ document, for your Success Criterion (SC).
  • Check if the implementation of your selected technique on your piece of content passes the relevant test.
  • If it doesn’t, re-read the ‘How to Meet…’ documentation, re-implement and re-test before moving to the next stage.

In addition to the tests within the WCAG, test the effectiveness of your selected technique with real people, on real email clients, webmail clients and apps, on real devices.

Example: Tests.

Next
11

Stage 11.

Check if you have other Success Criteria (SC) listed for your piece of content.

  • If you do, go back to Stage 4, and select the next Success Criterion (SC) on your list.
  • If you don’t, go forward to the next and final stage.

Example:

Next
12

Stage 12.

Build your piece of content into a Design System for re-use, and repeat the process from Stage 1, selecting your next piece of content.

Back to Stage 1