How to make content accessible

For businesses, non-profit organizations and charities, having an accessible website and content media is not just good practice, it is a necessary step that increases the reach of an organization, and benefits all users.

This section examines how you can develop web content that is accessible.

Return to top of page

Posting Videos

If your organization will be posting a video online, planning and adding captions adds to the inclusiveness of that material. Captions help more people than just those who live with a hearing loss, they also help in a variety of other ways:

  • Viewers who use English as a second language benefit from closed captions, because they make it easier to follow speech.
  • Captions aid with comprehension of dialogue that is spoken very quickly, with accents, mumbling, or background noise.
  • Captions clarify contextual information including full names, brand names, or technical terminology.
  • They help maintain concentration, which can provide a better experience for viewers with learning disabilities, attention deficits, or autism.
  • Viewers watching videos in sound-sensitive environments can use captions, like offices and libraries.
  • Online videos with captions create higher user engagement and better user experience.

CHHA offers information on different captioning techniques in its CHHA Online Tool module: How to Create Accessible Digital Content – A Guide for Service Providers (to create your free CHHA Online Tool account, please contact awickware@chha.ca)

Return to top of page

Posting Audio Content

When posting audio content, it is important to provide a full written transcript for accessibility purposes, especially when the content is dialogue oriented.

There are many good reasons to support audio content with transcripts; firstly, it allows audience members who prefer a text based alternative to consume this type of content. Secondly, it reinforces audio files with clickable links in the transcript making content much easier to search for. Including a transcript also improves online indexing and search engine optimization. Moreover, some people like to read along while listening to reinforce the content and message. Making transcripts available also allows deaf-blind users to access this content via braille displays.

Also important, is the type of media player embedded in the website. Media players should have audio control features such as volume control and playback features, including pause, rewind, fast-forward, etc.… These types of features are helpful those living with hearing loss if certain words or parts of the dialogue are missed when listening to the recording the first time.

Return to top of page

Developing Accessible Websites

Creating a website that is accessible is crucial, it provides equal access to all visitors as well as providing tangible readership benefits to businesses and organizations. Accessible websites tend to have better search results, reduced maintenance costs, and increased audience reach. Website accessibility should consider the following situations:

  • Those with hearing loss: Deafened or hard of hearing individuals cannot access audio content, so video needs to be captioned, and audio-only media needs be transcribed. People who identify as being part of the Deaf community may prefer sign language videos to support your content. For more information on accessible web design for people who live with hearing loss, WebAIM offers several resources: http://webaim.org/articles/auditory/)

  • Those who experience vision loss: Individuals who are blind tend to rely on either audible output (such as screen readers) or tactile output (a refreshable Braille device). Images on the web that do not have Alternative Text associated with them (frequently referred to as “Alt Text") will be largely meaningless to users of such assistive technologies. Individuals with low vision may use screen magnification software that allows them to zoom into all or a portion of the visual screen. Text that is part of an image is especially troubling for magnifiers, as it pixilates or loses clarity. Unless it is-specific branding, it’s better to avoid images of text in your web content. Some may prefer to enlarge the font on websites using standard web browser functions, such as Ctrl + in Windows-based browsers or Command + for Mac browsers. Those who live with a form of colour blindness may have difficulty navigating websites that are colour dependent. It’s a good idea to use high contrast colour combinations, and to make sure the design does not rely on colour alone to communicate information. For example, keep links underlined, and provide borders for buttons. For more information on accessible web design for people who live with vision loss, the Canadian National Institute for the Blind (CNIB) offers several resources: http://www.cnib.ca/en/living/accessible-design/Pages/web.aspx)

  • Those who have a learning or cognitive disability: Individuals with learning disabilities may use audible output, or software that highlights words or phrases as they’re read aloud using synthesized speech. Using plain language makes a web site easier to understand for everyone. For more information on accessible web design for people who live with cognitive or learning disabilities, Dev. Opera offers several resources and tips: https://dev.opera.com/articles/cognitive-disability-learning-difficulty/)

  • Those who live with a physical disability: Individuals with physical challenges affecting the use of their hands (whether temporary or not) may be unable to use a mouse. They may rely on keyboard shortcuts or use assistive technologies such as speech recognition, head pointers, mouth sticks, or eye-gaze tracking systems. For more information on accessible web design for people who live with a physical disability, Interactive Accessibility Experts offers several tips: http://www.interactiveaccessibility.com/blog/5-tips-improve-web-mobilitydexterity-disabilities#.WOfcstLyvIU)

  • Mobile device users: Individuals who access the web using a mobile device (such as a smartphone or tablet) often experience accessibility barriers, as they’re using a smaller screen (possibly outside with light glare) and may need to zoom in or increase the font size. They are also likely to be using a touch interface rather than a mouse. Consider that Apple’s iPhone and iPad devices do not support Adobe Flash. For more information on accessible web design for mobile accessibility, the W3C website provides several links and resources: https://www.w3.org/WAI/mobile/)

  • Limited bandwidth: Individuals located in a rural region or who cannot afford access to high-speed Internet – even if it is now considered a right in Canada – may be constrained to slower Internet connections. These users benefit from pages that load quickly, so including low resolution images with Alt text (with the option to view a higher definition image, if the user desires)and transcripts for video/audio content. For more information on accessible web design for low bandwidth Aptivate offers detailed explanations, tips and resources: http://www.aptivate.org/webguidelines/Why.html)

The Government of Canada has also developed the Web Experience Toolkit (WET), a set of web components for building innovative websites available openly for anyone who wishes to develop accessible websites using this framework.

If an organization has already produced a website, but is unsure whether this website meets the accessibility guidelines set out in the W3C there are checklists and automated checking tools that can evaluate the website:

  • WebAIM's WCAG 2.0 Checklist for HTML documents - http://webaim.org/standards/wcag/checklist

    This checklist provides an overview of several accessibility measures, and recommendations for implementing HTML-related principles and techniques for websites conforming to WCAG 2.0 specification. The language used here has been simplified from the official WCAG 2.0 specification (http://www.w3.org/TR/WCAG20/) to make it easier to implement and verify web page accessibility.

  • W3C Markup Validation System - http://validator.w3.org/

    The Markup Validator is a free tool and service that validates markup: in other words, it checks the syntax of Web documents, written in formats such as (X)HTML. The Validator compares your HTML document to the defined syntax of HTML and reports any discrepancies; syntax errors can be problematic for assistive devices navigating a website, so it is a helpful tool in determining that the coding is running as it should be, and for routing out potential problems.

  • WebAIM’s WAVE web accessibility evaluation tool - http://wave.webaim.org/

    This online tool checks page accessibility, displaying a webpage with tags to show good and bad points.

  • W3C CSS Validation Service - https://jigsaw.w3.org/css-validator/

    The CSS Validation Service checks the validity of Cascading Style Sheets (CSS). CSS is a style sheet language used for describing the presentation of a document written in a markup language. CSS organizes content visually, helping ensure code is good. Note that almost all modern websites include CSS.

  • ARIA Validator for Chrome - https://chrome.google.com/webstore/detail/aria-validator/oigghlanfjgnkcndchmnlnmaojahnjoc

    This tool adds a button to your Chrome browser that you can click when you want to validate the ARIA implementation of an HTML page. It also checks for duplicate IDs in your HTML. It will open a new tab showing errors and warnings for each frame it can read on the page. Click the link to the Chrome webstore above and search for ARIA Validator for Chrome to download the extension.

  • AChecker Web Accessibility Checker - http://achecker.ca/checker/index.php

    This tool checks single HTML pages for conformance with W3C Accessibility Standards to ensure the content can be accessed by everyone, including those who use assistive devices and programs.

Return to top of page

Examples of accessibility features

See Examples of Accessibility Features for:

  • creating accessible heading structures
  • high contrast colour options
  • accessible fonts
  • accessible hyperlink formats

Return to top of page

Resources for CHHA Chapters and Branches

When CHHA members ask their local CHHA Chapter or Branch for information on broadcasting accessibility, the following handouts are available:

If you are unable to access the CHHA Online Tool an accessible format document is available. Click the following link to download: "How to create accessible digital content: A Guide for Service Providers"


There are several helpful resources available online to help guide accessibility:

Regulations, policies and best practices:

  1. CRTC regulations - http://www.crtc.gc.ca/eng/home-accueil.htm

  2. Accessibility issues with Social Media - http://www.ssbbartgroup.com/blog/accessible-social-media/

  3. AMI - http://www.ami.ca/media-accessibility/Pages/default.aspx , http://www.ami.ca/media-accessibility/Pages/Broadcast-Accessibility.aspx

  4. Web Standards for the GoC - http://www.tbs-sct.gc.ca/ws-nw/index-eng.asp

  5. AODA Integrated Accessibility Standards Regulation (See 2.14: Accessible Websites…) - https://www.ontario.ca/laws/regulation/110191#BK15

  6. Treasury Board of Canada, Standard on Web Accessibility - http://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601&section=text

  7. Mobile Accessibility Best Practices - https://www.w3.org/WAI/mobile/

  8. W3C Web Content Accessibility Guidelines - https://www.w3.org/TR/WCAG/

  9. Canadian Association of Broadcasters, Policies - http://www.cab-acr.ca/english/social/default.shtm

  10. CRTC regulations - http://www.crtc.gc.ca/eng/home-accueil.htm

Return to top of page