Marketing with accessibility in mind: a guide to inclusive design

Digital accessibility is everyone’s responsibility. Even if it is not your immediate responsibility to ensure that your organization’s website and web content are in an accessible format, you should still have a general understanding of what digital accessibility means. For example, do you know how colour use of a website can affect the experience of someone with a disability? You should also be aware of any accessibility regulations that apply to your organization.

What about social media? If you do any marketing on platforms such as Facebook and LinkedIn, do you have to ensure that the content is in an accessible format? The short answer: no, you do not. The law only applies to content that you control.

In Ontario, the Information and Communications Standard under the Accessibility for Ontarians with Disabilities Act was introduced to help Ontario businesses and organizations make their information accessible for people with disabilities. In terms of digital accessibility, Ontario requires organizations with 50 or more employees to make new websites and web content launched accessible according to the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.0. What's to be done beginning January 1, 2014 and January 1, 2021.

Yet accessibility is not just about complying with the law; it’s also about giving consumers with disabilities the opportunity to use or buy your services. Did you know that people with disabilities in Canada have an estimated spending power of $25 billion per year? If you are not including consumers with disabilities as part of your target audience, you may be losing out on a lot of business.

Making your website more accessible

Among the WCAG 2.0 guidelines, here are a few examples of what marketers can do to make websites more accessible. These are examples of some of the criteria, but in order to have a compliant website, you'll need to have a team that covers all aspects of web accessibility. Each example includes a link to the WCAG 2.0 instructions for the related success criterion.

1. Give every web page a unique,descriptive page title

The descriptive page title displayed in the browser tab for the page, document or app that you are on is determined using the <title> element (or the Description metadata for documents). Selecting your page titles carefully not only helps people using your site to distinguish between two or more tabs from the same site opened on their browser, it also improves search engine indexing effectiveness for your site.

Every page title should be unique, and include both the unique name for that page or document and the name of the site.


2. Identify the language of every page and change of language within a page

A screen reader or speech synthesizer can only pronounce the text on the page correctly if the language of the page or of a phrase or word is correctly identified. Each page or document gets its main human language identified. When incorporating a word, phrase or passage in a language that is different from the main language, the change must be indicated too. (There’s an exception for proper nouns and a few other situations.) In HTML, this is done with the lang attribute).

This benefits people with visual challenges as well as those who listen through audio delivery, for example while driving. Indicating language changes is also important when captions are used in synchronized media content.


3. Provide text equivalents for all non-text content

All non-text content (photos, images, icons, short animations charts, graphs, etc.), which convey information must have a text equivalent, such as an “alt” attribute. This enables users with their images turned off or who are using screen readers to benefit from what’s being conveyed. It also provides much more data to search engines about your content. There are exceptions, such as for logos and decorations.

There are many ways to provide text equivalents, depending on the complexity of the non-text content. For photos, provide a short description (up to 100 characters is best) that helps users who cannot see the image understand the key information that is being conveyed. The description should not be a duplicate of the photo caption rather it should be what you would describe to someone over the phone.

For a graph or chart, it may be best to provide a longer description that could be published on a separate page or downloaded as a document.


4. Choose sufficiently contrasting colours

People who have colour vision deficiency find it difficult or impossible to distinguish between certain colours. So do people with low vision, or in instances where low light is present, making it difficult to properly see a computer or mobile screen. It is particularly important for web designers or anyone else involved in selecting colours on a page to select colours that provide sufficient contrast between text and background or between adjacent elements. For example, Level AA requires a contrast ratio of at least 4.5:1 for body type (3:1 for large type) between text (including non-branding images of text) and the background behind the text. There are many online tools available for testing colour contrast that are listed on:


5. Don’t use colour as the only way to convey information

If you use colour to indicate options or to provide meaning for different groups of data, such as in a chart or table, or to indicate required fields on a form, also use other means to provide the same instructions for those who can’t perceive colour. This makes it easier for everyone.


6. Instead of using a picture of text, convey the content using machine text

Though it may be tempting to use an image file of a cool print design for a word, catchphrase or letter, avoid using a graphic file, unless it’s your brand. People may have trouble reading the text. Instead create the effect you want using machine text — text entered through a keyboard. To create special text formatting in HTML, like for a quote or navigation item, use CSS, potentially combined with streaming fonts so you don’t have to compromise on typefaces.


7. Caption pre-recorded video content and webinars

Provide captions for all pre-recorded video that has audio. Creating captions for videos has become much easier with the improvements in captioning functionality within YouTube and Vimeo, among others. These services can automatically create captions based on voice recognition software, though you’ll need to review the automatic captions to fix errors or you’ll risk getting some embarrassing bloopers. You’ll also need to make various other tweaks to conform to industry standard for pacing. Note: AODA regulations provide some exceptions to the WCAG rules for captioning and audio descriptions. See more.


8. Provide descriptive text transcripts for audio and video

Transcripts of video and audio files aid the hearing-impaired, providing what was said in written form. Transcripts are also useful for searching and indexing the contents of a video. Descriptive text transcripts go one step further, adding descriptions of visual information to the transcript, by describing what is being shown for those who cannot see it. There are some accessible alternatives for providing access to other time-based and synchronized media - including audio-only, video-only, or audio and/or video combined with interaction.


9. Make sure you can browse the site and do everything without a mouse

Visitors must be able to get to all content using a keyboard. This benefits people who cannot use a pointing device, either because they can’t see or because they can’t easily move such a device.

Move through your site using the Tab key to go forward, Shift+Tab to go backward, as well as arrow keys and Enter to navigate menus, controls, or choices on forms. You’ll soon discover if there is anything that can’t be done, as well as if you end up in a keyboard trap (where you can’t get out of where you’ve landed).


10. Confirm the order that screen readers announce your content makes sense

Install a screen reader, such as the free NVDA for Windows, and find out what your site sounds like when read out loud ... or use a tool such as the free WAVE Toolbar for Firefox or Chrome to be shown what order the words would be read out loud.

Online Resources and Useful Links

A Guide to the Integrated Accessibility Standards Regulation

Accessibility Standard for Customer Service was the first standard to become law. The Ontario Government’s next four standards Information and Communications, Employment, Transportation, and Design of Public Spaces have been combined under one regulation, the Integrated Accessibility Standards Regulation. This regulation is now law and the requirements of the regulation have deadlines spanning between 2011 and 2021.

How to make your website accessible

This page summarizes how businesses and non-profit organizations with 50+ employees can make new or significantly updated websites accessible for people with disabilities. You’ll see what you and your organization need to do and by when.

Ontario Accessibility Laws

  • International Standards

The W3CWeb Accessibility Initiative (WAI) has developed strategies, guidelines, and resources to help make the web accessible to people with disabilities. You’ll find a series of comprehensive resources for:

W3C's Understanding WCAG 2.0

Current web accessibility standards are based upon these foundational standards.

PDF/UA

The PDF format supports full accessibility, but it takes know-how to get it right, as most export commands, unfortunately, still fall short of yielding accessible PDF. The PDF specification for universal access—PDF/UA—is an ISO standard. For guidance and examples on how to fix the issues, see the PDF/UA Technical Implementation Guide: Understanding ISO 14289-1 (PDF/UA-1)

Authors

This document was prepared for the Canadian Marketing Association, as part of its EnAbling Change project in collaboration with the Government of Ontario.

David Berman, President, David Berman Communications

David Berman, FGDC, RGD, is a Canadian inclusive designer and thought leader. He is sustainability chair of Icograda (the world body for communication design), a Fellow of the Society of Graphic Designers of Canada, and Ethics Chair for graphic design in Canada. He was the first elected president of RGD Ontario. David is a special advisor to the United Nations on how to use accessible design to fulfill the Millennium Development Goals. Follow him on Twitter @davidberman.

Veronica Feihl, Associate, David Berman Communications

Digital strategist and accredited public relations practitioner, Veronica Feihl is a Toronto associate of David Berman Communications. She recently produced a set of 5 short videos, Why Accessibility Matters, available on YouTube. Since 1996, she has provided training, consulting and management services to help clients optimize their online communications, including an interest in making content more widely accessible. Veronica draws on her extensive experience in stakeholder research, information architecture, usability testing and presenting information to serve client and stakeholder needs, including WCAG 2.0 and AODA compliance.

Some portions adapted from material copyright David Berman. All rights reserved.

For alternative formats of this document, please contact the Canadian Marketing Association at advocacy@the-cma.org or 416-391-2362.

Tags: Advocacy, Digital, Government Relations, Regulatory Affairs, Technology, accessibility