Ensuring accessibility is a legal mandate for many organizations.
Web Content Accessibility Guidelines (WCAG) are the guidelines and measures that many organizations use to ensure that their electronic communication is accessible.
Under the Disability Discrimination Act 1992, Australian Government agencies are required to ensure information and services are provided in a non-discriminatory accessible manner.
For other organizations there are many reasons why it makes sense to meet the WCAG requirements; complying with the WCAG criteria makes web content more SEO ‘friendly’ and helps make content simpler to understand and use for everyone.
Below I cover the areas where I most often see accessibility issues when providing email marketing training and consulting.
Images cause all sorts of WCAG non-compliance issues in email marketing.
Images Must Always Have ALT Text
“Images must have text alternatives that describe the information or function represented by them”. This success criteria is met by adding meaningful and descriptive ALT text. All good email marketing services such as Mailchimp provide a simple means of adding ALT text when adding an image.
Should you not have ALT text, a person using a screen reader for example won’t be given the context of the image. Another good reason to include ALT text is that many people have email images disabled by default; adding ALT text means that at least recipients won’t see an empty space in place of the image.
Buttons must be HTML and not Images
In the ‘old days’ it could be difficult to create a button (call to action) using HTML or CSS. Fortunately times have moved along and Mailchimp, for example, has a drag and drop button content block that makes adding an HTML button very quick and easy.
The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.
We really shouldn’t be using a hyperlinked image as a button. As discussed previously, there are big problems with images being disabled by default for some people. By using an HTML/CSS button (e.g. the Mailchimp button content block) to create a button we are ensuring that the button will always display as a button and will be large enough to meet WCAG button guidelines.
Do your Animated GIF files cause Seizures?
An animated GIF is a series of images that ‘scroll’. This is termed motion animation in WCAG. The WCAG guidelines specify that a means of stopping the motion must be available. Email readers (Gmail, Outlook etc.) typically can be set to disable all images thereby allowing for meeting the WCAG requirement of “[providing] a control for users to turn off non-essential animations from user interaction”.
I however recommend to my clients to “avoid using unnecessary animation” in order to meet the success criteria i.e. use a static image in place of an animated image.
Don’t Save Text as an Image
Although saving text as an image is not forbidden in WCAG, the guidelines state “if the image is not a logo, avoid text in images”. It is however also noted in the guidelines that “If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text…” (and there can’t be an argument that modern email readers don’t display text adequately).
There are numerous other reasons for avoiding saving text as an image including:
- Screen readers, for example, can’t read text saved as, or on, an image.
- Your emails are more likely to end up in the spam folder if you save text as an image.
- As previously noted, many people have image download disabled by default; if your text is saved on an image they won’t see the text by default.
Structure, Hierarchy and Presentation
Contrasting colours and sizes of text shouldn’t alone determine the structure of your document. Instead we should be using HTML elements to specify structure and importance. Fortunately we don’t need to know HTML or code to get this correct.
Headings define the order and importance of sections
WCAG notes that “when the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined”. What this means in simpler terms is that it must be possible for a screen reader, for example, to understand the hierarchy of headings and content.
Machines (e.g. screen readers) look for headings (among other things) to determine the order/sequence of content. A Heading 2 always should follow a Heading 1 (as opposed to a Heading 3 following a Heading 1 for example). A Header is recognised by an HTML Header tag and not by the size nor decoration of the font.
In good email services there is the option to designate text appropriately. For example, you’d designate paragraph text as paragraph and heading text as e.g. Heading1 or H1.
A good way of understanding structure is to think of creating a table of content in Word or Google Docs; to automatically have your table of content created and updated yo must be using the appropriate headers.
Use Italics and Underline to Define Important Things
The objective of WCAG success criterion 1.3.1. is “to facilitate the interaction of assistive technology with content by logically separating the content’s structural encoding from the presentational encoding”. Furthermore,
in WCAG, “color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. In addition “while presentational features visually imply structure — users can determine headings, paragraphs, lists, etc. from the formatting conventions used — these features do not encode the structure unambiguously enough for assistive technology to interact with the page effectively”.
In short we must use a machine readable means of defining elements in an email message. previously the structure of headings was discussed but we also need to be aware to use, for example, italics or bold in addition to, or in place of colour and font size to illustrate importance.
Aligning text on only one side
A very common issue I see with email marketing, in relation to accessibility, is that content is aligned in multiple ways in the same email message. For example, the header may be centred whilst paragraph content is left aligned.
The Visual Presentation success criterion recommends “aligning text to only one side”.
Your Email Must be Responsive
I’ve lumped together various accessibility criterion into this “email must be responsive” section. Technically your emails don’t have to be responsive to meet WCAG criterion however a good responsive email helps to meet various criteria, specifically “content can be resized to 400% without loss of content or functionality, and without requiring two-dimensional scrolling except for parts of the content where fixed spatial layout is necessary to use or meaning”.
I always advise clients to use Mailchimp layouts to create their campaigns (as opposed to having a custom template created); a major reason for this is that Mailchimp layouts are responsive and are accessible (and meet the “resize to 400% criterion” named above.
The two most common reasons that I encounter where sizing of text, content and hyperlinks doesn’t meet the “resize to 400% criterion” is:
- A custom coded template is used.
- Content has been copied from Microsoft Word and pasted into an email campaign text block.
Have good Colour Contrast
Most people get this right but, in short, ensure that there is enough contrast between, for example, your background colour and text colour.