WCAG Checklist for Marketers
This checklist will help your Marketing team to keep accessibility in mind throughout your organization’s digital campaigns, adapted from a resource by texthelp.
The goal of your marketing team is to make sure that your online messages resonate with every unique person in your target audience. Considering the experiences of people with physical, cognitive, literacy or language challenges matter.
As a marketer, it’s our job to make sure that our online messages resonate with every unique person in our target audience. It’s up to us to make sure that they’re able to engage with our web content, and interact with our digital presence successfully. Not only for the success of our campaigns, but because it’s the right thing to do.
Every person deserves to be welcomed in both the physical and virtual worlds.
And that’s why internationally accepted web standards—Web Content Accessibility Guidelines (WCAG)—exist, to help us think more inclusively.
In this guide, texthelp created four checklists to help you maintain best practice across all your digital communications.
1. Writing accessible information
2. Creating accessible digital documents and PDFs
3. Uploading digital content in line with best practice
4. Publishing inclusive social communications
1. Writing accessible information
Have you written your content in Plain English?
Clear and simple language appropriate to the audience’s developmental or educational level, and their familiarity with the topic.
Free from complex language and unnecessary technical jargon.
Favour simpler words with less syllables.
Where required, have you included definitions or added contextual information?
If your content requires you to include abbreviations, acronyms, or technical jargon, include extra information to help your audience understand unfamiliar terminology.
Consider embedding hyperlinks to definitions or further information, which helps put your content into context.
Have you provided instructions that do not rely on sensory characteristics?
If instructions require users to identify elements by their sensory characteristics (for example, colour, shape, size, location, orientation or sound), this can create barriers for people who cannot perceive these characteristics.
Some characteristics, such as location, can also change depending on the device used to view the content.
Have you used short paragraphs and short sentences?
To help your audience digest your content, it’s best practice to keep sentences between 8-20 words, and paragraphs between 1-2 sentences (tip – stick to one thought per sentence).
Have you considered where visual or audio support might be beneficial?
Everyone processes information differently.
Consider the needs of visual and auditory processors, and highlight areas where visual and auditory supports would be advantageous.
This will help your design team to create the final asset in line with best practice, or remind you to add these supports during step two.
2. Creating accessible digital documents and PDFs
Have you chosen a font style and font size that’s easy-to-read?
Choose a sans-serif font, such as Verdana, Arial or Tahoma, and use a minimum font size of 12pt/16px.
It’s also best practice to limit the number of fonts used across an asset.
Have you added your content using left-aligned text?
Left-aligned text is easier to read for the human eye, and has better integration with screen readers.
Fully justified text can be difficult for some people to read due to uneven spacing. Use center or right-aligned text in moderation.
Have you used tags throughout the document?
It’s important to use tags to mark up content so that screen readers know how to interpret and relay content to users.
Use the following tags to determine different elements of the content:
Headings <H1>, <H2> etc.
Paragraphs <P>
Tables <Table>
Images <FIGURE>
Bullet points (or lists) <LI>
Do your Headings tags follow a hierarchy structure?
Form a hierarchy of content by using headings in the right order, for example – Heading 1 (main page title), Heading 2 (sub-headings), and Heading 3 (sub-sub headings).
This conveys the hierarchy of the page to assistive technologies which may use this information to provide shortcuts.
Users of screen readers, for example, can use headings to jump through the content using their assistive device to get a general idea as to what it entails.
Have you chosen a colour selection that’s optimized for visibility?
Avoid colour combinations that make it difficult to separate content from its background, such as similar colours.
Not only is this good practice for all, but it’ll help to make content more accessible for those with visual impairments or conditions like colour blindness.
Set the contrast ratio between text and its background to be at least 4.5 to 1.
If your font is at least 18pt or 14pt bold, the minimum drops to 3 to 1.
The same consideration should apply when using colours to convey information on diagrams, maps, and other types of images.
When in doubt, use a colour contrast checker such as WebAIM’s Contrast Checker.
Presidents Group tip:
There are a lot of nuances to creating truly accessible PDF documents properly. We recommend businesses reach out to companies who can provide remediated documents, wherever possible, to ensure accuracy and be user tester by those native to assistive technologies.
We recommend businesses outsource to Able Docs, Equidox PDF Solutions, and many more who specialize in these services.
3. Uploading digital content to web pages in line with best practice
Page styling and layout
Have you added your content using left-aligned text?
Left-aligned text is easier to read for the human eye since it provides a consistent leading edge. This can also be beneficial for users of magnification software where only a portion of the text is visible at a time.
Fully justified text can be difficult for some people to read due to uneven spacing between words, including those with cognitive disabilities. Use center or right-aligned text in moderation.
Have you used ‘styles’ throughout the web page?
Use the ‘style’ options (Title, Subtitle, Paragraph, Header tags, Inline quotation etc.) available in your CMS (Content Management System), rather than bold or underlined text, to provide a clear structure and make key content easily identifiable to screen readers.
Do your Header tags follow a hierarchy structure?
Form a hierarchy of content by using headings in the right order, for example – Heading 1 (main page title), Heading 2 (sub-headings), and Heading 3 (sub-sub headings).
This conveys the hierarchy of the page to assistive technologies which may use this information to provide shortcuts.
Users of screen readers, for example, can use headings to jump through the content using their assistive device to get a general idea as to what it entails.
Are your styling choices optimised for visibility?
Ensure your chosen colour scheme is accessible to those with a visual impairment or colour blindness by using a colour contrast checker, such as WebAIM’s Contrast Checker.
Have you chosen a font style and font size that’s easy-to-read?
Choose a sans-serif font, such as Verdana, Arial or Tahoma, and use a minimum font size of 12pt (approximately 16px). It’s also best practice to limit the number of fonts used across a site.
Images, video and moving visuals
Have you added Alt Text to images, and used descriptive text to do so?
All visuals should have Alt Text added to make them available to assistive technologies.
If the image is necessary for understanding, the description should effectively convey the content to help those with visual impairments understand your content better.
For example, an image of a pie chart might have Alt Text reading: “Pie chart illustrating that “40% voted yes and 60% voted no”.
Otherwise, if the image is purely decorative, the description should remain empty.
If your content contains an image of a graph, infographic, or complex visual data, this information is best provided in a written format as well.
It isn’t user-friendly to provide a long description in an image Alt Text, so provide a text transcript on the page instead, or link to a text alternative landing page or document.
Are all videos or moving visuals accompanied with alternative formats?
Provide an alternative format to audio information by using closed captions or subtitles, or by providing a written transcript.
Offer an alternative format to visual information by providing an audio description, or by providing a written transcript.
Have you made sure that multimedia content does not automatically play when a visitor visits the page?
There should be no multimedia content with audio that automatically plays when a page loads.
If there is audio that automatically plays, it should be no longer than 3 seconds.
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there should be a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.
Hyperlinks
Have you embedded links throughout your content?
Embed links within the written text of the information you’re presenting or referencing, instead of writing out the entire link.
Have you used meaningful text to embed the link?
Use text that accurately describes the end destination but makes sense as a phrase on its own.
For individuals using screen readers, links are often out of context. Many people will pull out all links into a list, to navigate through and find what they’re looking for. That’s why being contextual with links is important.
Are your hyperlinks formatted in contrast from the body text?
Format links using underlines, bold or larger size text, so they stand out from the rest of the content on the page.
Tables, lists and forms
Are structural elements within your content marked up accurately?
Lists, tables and input fields should be optimized for screen readers and keyboard-only navigation.
This means including appropriate HTML markup structure. If you’re unsure, ask your web developer to check for you.
Are your forms accessible using keyboard only navigation?
Text fields, buttons and checkboxes should contain a text label and be accessible by keyboard only.
Carry out a simple check to ensure functional navigation by using your key tab to make sure you can access all areas of the form.
It’s also useful to add helper text to form fields, to provide an example input.
4. Publishing inclusive social communications
Have you written your content in Plain English?
Clear and simple language appropriate to the audience’s developmental or educational level, and their familiarity with the topic.
Free from complex language and unnecessary technical jargon.
Have you added Alt Text to images, and used descriptive text to do so?
Social media platforms such as Twitter, Facebook and LinkedIn provide the option to add a description or alternative text to images.
Use this option to add a description which effectively conveys the content, to help those with visual impairments understand your social post better.
If there’s no option for alternative text on your platform, make sure you have included enough content in your social post to put your message into context, for those that cannot access the accompanying visual.
Presidents Group tip:
Folks who are not blind but can’t see certain images/colours/etc. can benefit from seeing your image descriptions/alt-text, too, and may not use assistive tech. We recommend the best practice of including this text in the post to ensure it’s accessible to the largest number of people with disabilities. There’s various approaches, ask us for tips!
Are all videos or moving visuals accompanied with alternative formats?
Provide an alternative format to audio information by using closed captions or subtitles throughout your videos.
Offer an alternative format to visual information by providing a transcript or an audio description.
If you are using YouTube as a hosting platform for your videos, be vigilant when using auto-subtitles. You may need to adjust or upload accurate captions.