Introduction

I have been designing and building online courses and digital learning resources for many years, and I am still learning new ways to make my resources as engaging and effective as possible for all of my students. An important area that I have been concentrating on in recent years is Digital Accessibility. I have learned that it can be fairly easy to maximize the accessibility of our courses by following a few simple guidelines.

Why Accessibility Matters

For me, accessibility issues started as a professional interest. While working as an instructional developer at the College of the North Atlantic-Qatar, I had the opportunity to learn about creating accessible documents through a professional development opportunity hosted by the Mada Assistive Technology Centre (Mada, 2017). While working with the Online Learning team at the Fraser Health Authority, I had the opportunity to explore accessibility issues in education more deeply by participating in the University of Southampton’s Digital Accessibility: Enabling Participation in the Information Society course (Wald et al., n.d.). But, in recent years, my interest has become more personal because I have two children with very different accessibility needs. I have also worked with students who have had documented accessibility needs, and I suspect that there have been many others who had needs that they either had not disclosed or were not even aware of.

You will likely be working with students who have either documented, undisclosed, or perhaps undiagnosed needs that will be impacted by how you prepare and present your digital learning resources. As Doyle (2021) points out, “22% of Canadians over the age of 15 live with at least one disability that limits their everyday activities” (para. 1). According to Dyslexia Canada (n.d.), 15-20% of the population has a language-based learning disability, meaning that nearly one in five of your students will likely be impacted by basic readability accessibility accommodations when creating your digital learning resources. Many Canadian jurisdictions have already enacted legislation dictating Digital Accessibility standards for instructional design of courses and digitally-mediated communications with our students, their parents, colleagues, and the general public. In Canada, Ontario was the first province to explicitly codify Digital Accessibility standards through the Accessibility for Ontarians with Disabilities Act (AODA, 2005). Provinces such as Manitoba, Nova Scotia, and Quebec have similar existing laws, while others, such as British Columbia, have legislation in the proposal stages (Doyle, 2021). Most of the standards these provinces have put forth are based on the World Wide Web Consortium’s Web Content Accessibility Guidelines (W3C, 2022).

It is unreasonable to expect that all teachers will be well-versed in all of the web-content authoring guidelines or the range of digital tools available to support their students’ variety of accessibility needs. However, everyone needs to be aware of basic accessibility standards. In some jurisdictions, you may be required to meet these basic standards whether or not you are aware of a particular student who needs accommodations (Ontario Human Rights Commission, 2016). These efforts represent small changes in practice that benefit all of our students, not just those with diagnosed needs.

Guidelines for Creating Accessible Learning Resources

The following guidelines are based on the WCAG 2.1 standards (W3C, n.d.). Without investing in specialized software or learning additional web-coding skills, these are steps anyone can take.

• Properly format and tag headings and text. Whether you are creating a word processor document, a PDF, a PowerPoint presentation, or a web page (including a page in a learning management system), avoid manually formatting the font, size, or colour of your text to create document headings (Pennsylvania State University, 2021). Use the formatting toolbar in your word processor or web editor to tag your headings as Heading 1, Heading 2, Heading 3, etc., and your main text as Paragraph. These tags will allow digital screen reader applications to navigate your document or web content using a keyboard or digital switch. Sticking to the default paragraph and heading tags will also enable your students to use their device’s accessibility settings or browser plugins. An example is the Open Dyslexic font (abbiecod.es, 2021; OpenDyslexic.org, n.d.), which adjusts your digital reading materials to meet individual needs.
• Add ALT-text and avoid embedding a lot of text within images. If you include an image in your document or web page, be sure to add alternate (ALT) text to the image (Harvard University, 2022). You can usually do this by selecting the appropriate option when inserting the image or by right-clicking on the image. Your ALT-text should be a short (1-2 sentences, at most) description of the image. This text will be read aloud to students using a screen reader application, which is beneficial to visually impaired students. If the image is purely decorative, and your document or web editor provides the option, check the box to tag the image as decorative so that a screen reader will ignore it. Keep in mind that any text in the image itself is not machine-readable – so it is not accessible. Thus, avoid embedding important text within an image.
• Be careful when using colour. Colours do not always display how we intend them to on everyone’s screen. Some of our students may also have visual impairments that make it challenging to read coloured text (Morton, 2016). With this in mind, you should avoid using coloured text to create emphasis, as that emphasis will not be apparent to some students. You should also be careful to maximize the contrast ratio (called colour-contrast ratio) between your text and the background. Some colour combinations may make it difficult to read the text. When in doubt, stick to black text on a white background. Many learning management systems will point out colour-contrast issues when using the built-in accessibility checker. You can also use a free Color Contrast Analyzer like the one shared by the Paciello Group (n.d.) to check your documents and web pages.
• Check your reading order. When you create a document, PowerPoint presentation, or web page, the intended reading order for your content may be apparent to visual readers. However, this may not be the case for anyone using a screen reader application (Colorado State University, 2022). Reading order is often impacted by the order in which you placed the items on the page when creating the document (especially when creating slideshow presentations). One trick to ensure the correct reading order is to keep things linear on the page or screen, as screen readers will read the content from top to bottom by default. Another strategy is to avoid using tables to present content unless you offer statistical data as tables need to be correctly formatted with tagged header rows or columns, or they become confusing to a screen reader. Built-in Accessibility Checkers in word processors, PowerPoint, PDF editors, and web editors often can identify potential issues with the reading order of content.
• Make sure videos have Closed Captions. Many users may not be able to hear the narration in videos you choose or create to add to your course or web-based content. Many other users frequently decide to watch videos with the sound turned off. Make sure you select videos that have Closed Captions available. Use your video editor or YouTube’s closed captioning tools (Google, 2022) to add captions to your videos.
• Use an Accessibility Checker. Most word processing such as Microsoft Word (Microsoft, 2022a), web editing applications, and learning management systems such as Canvas (Instructure, 2022) now include an Accessibility Checker tool. It is often as easy to use as the spell checker. While an Accessibility Checker may not detect compatibility issues with some students’ advanced accessibility tools, it will pick up many common issues. Some examples include colour-contrast ratios for text, missing table headers, and missing ALT-text for images. The Accessibility Checker will often provide suggestions or simple click-through options to help you resolve any issues detected.

These general guidelines are summarized in Power’s (2020) downloadable Digital Accessibility Cheat Sheet [PDF].

Activities

Activity 1: Testing with a Screen Reader

Overview

Let’s look at how accessible the readability is for some of your digital learning resources. We will examine any material that you want to share with your students electronically for this activity. It can be a word-processed document, a PowerPoint slide deck, or web-based reading content. We want to determine if your materials are optimized for accessibility or if there are any potential barriers that you can easily remove.

Description

You can try this activity as often as you like, with various digital learning resource types. We want to determine if your students can easily access the materials using the most common accessibility tools, such as screen readers and browser extensions.

Try out a basic screen reader. Once you have one of your digital learning resources available, try using a screen reader application to read the text to you. Most applications are compatible with built-in text-to-speech tools or your device’s accessibility features. Let’s start with some of these basic tools.

For a Microsoft Word or PowerPoint document, go to the Review tab and click on the Read Aloud icon.

For web-based content, such as a document in Google Classroom or a page in a learning management system, try installing and using a screen reading browser extension such as Google’s (2021) Screen Reader.

• Try using the play, rewind, and forward options to navigate through your materials.
• Does the application read all of the text?
• Are there any text or images that are not read aloud? How might this impact your students’ understanding of the materials?

Try out a full-featured screen reader. Now, let’s try an application with more accessibility features some of your students may want to use, including document navigation tools. NVDA (NV Access, 2021) is a free, fully-functional screen reader application. Try downloading and installing NVDA, using it to navigate your digital learning materials.

• Try using the navigation tools to navigate between sections of your document.
• Does the application read all of the text?
• Are there any text or images that are not read aloud? How might this impact your students’ understanding of the materials?
• Are there any major headings or sections that you cannot navigate easily? How might this impact your students’ ability to read the materials? Can you fix navigation issues by adding proper heading tags in your materials?

Possible Challenges

The activities described here assume that you are using either a recent version of the Microsoft Office suite or the Chrome browser on a Windows computer. Older versions of Word or PowerPoint may not have the built-in Read Aloud feature. But, you can still try these activities using an add-on tool such as NVDA. Likewise, you may need to look for a screen reader plugin or extension for your preferred web browser.

Resources

• Google Chrome Screen Reader Extension (Google, 2021)
• Listen to Your Word Documents (Microsoft, 2022)
• NVDA Free Screen Reader (NV Access, 2021)

Activity 2: Testing Fonts and Colors

Overview

Some of your students may use their device’s accessibility features or web browser extensions to make digital reading materials more easily accessible for visual reading. It is good to test your materials to determine if things like font or colour choice might create unintended barriers to learning.

Description

For this activity, let’s look at some materials you have posted online (such as a web page or content page in a learning management system). We will examine whether your students can manipulate the fonts of your text or if the colours of your text might impact accessibility.

Try manipulating the text size. Some of your students may use accessibility tools to make the text easier to read. One of the most common ways is to enlarge the text. If you are viewing your materials in a desktop web browser, try using the built-in zoom feature to enlarge the content. If you are viewing your materials on a touch screen device (such as a phone or tablet), try pinching and zooming on the page.

• Does your text get bigger when you zoom in on the screen?
• Does your text extend off the side of the screen, forcing students to scroll left to right to read everything?

If you encounter these issues, you may need to reformat your text, determine if the text is in a text box with a hardcoded width, or determine if the content is inserted as text or contained within an image.

Try changing the display font. Another commonly used tool for students with language-based learning disabilities is a browser extension or plugin such as the OpenDyslexic font (abbiecod.es, 2021; OpenDyslexic.org, n.d.). This tool changes the default text font on a web page to a font that is easier for some students to read. Try installing the OpenDyslexic plugin for the Chrome browser, and use it to view your online content.

• Does your content display with the updated font when you use the extension?

If your text does not display with the updated font, you may need to reformat your text to revert to the default paragraph text formatting.

Try checking your colours. Colour contrast can impact the accessibility of your learning materials for some students who are colorblind or who have other visual acuity issues (Morton, 2016). For this exercise, you can use either web-based content or a word-processed document, PDF, or PowerPoint slide deck that you want to share with your students digitally. Download the Paciello Group’s (n.d.) free Color Contrast Analyzer tool. Use the colour pick to check the contrast of your text or image (foreground) against the page’s background colour.

• Does your colour-contrast ratio pass WCAG 2.1 standards for AA or AAA accessibility?

If your colour combination does not pass accessibility standards, you may need to change your text or background colours. Remember, when in doubt, stick to black text on a white background for the highest possible contrast ratio (and accessibility).

Possible Challenges

The text font plugin activity described above draws upon a browser plugin for the Chrome browser. You may need to search for the OpenDyslexic font for your preferred web browser. Suppose you are testing the colour contrast ratio for your online content in a learning management system. In that case, you may not be able to alter the default font colours set by your system administrator.

Resources

• OpenDyslexic for Chrome (abbiecod.es, 2021)
• OpenDyslexic Font Resources (OpenDyslexic.org, n.d.)
• Color Contrast Analyzer (CCA) (The Paciello Group, n.d.)

General Resources

• Accessible Digital Documents and Websites and Accessibility in E-Learning: The Council of Ontario Universities (2017a, b) provides many excellent resources to help you make your online teaching, and learning resources are accessible to all learners and AODA compliant.
• BCampus Open Education Accessibility Toolkit: BCampus (Coolidge et al., 2018) recently published an Open Access eBook on making digital learning resources, such as eBooks, compliant with digital accessibility guidelines.
• Google for Education Accessibility Resources: Want to learn more about maximizing Digital Accessibility in your Google Classroom or using Google Apps for Education? Google for Education (n.d.) provides a two-page PDF with overviews and links to their accessibility resources for teachers and students.
• Power Learning Solutions Digital Accessibility Resources: Are you looking for more tips, tricks, and resources to help you improve the Digital Accessibility compliance of your digital learning resources? You can find an ever-growing list of resources on my website, including recorded webinar presentations, tutorial videos, and links to tools (Power, 2022).
• Understanding WCAG Compliance Checkers and Their Shortfalls: Want to evaluate the Digital Accessibility compliance of your web-based learning resources, but there is no Accessibility Checker built into your platform? Essential Accessibility (2018) provides a good overview of how online accessibility checkers work, along with links to some free online accessibility checking tools, and a good must-have WCAG compliance checklist.

References

abbiecod.es. (2021, June 27). OpenDyslexic for Chrome (Version 12.0.0) [Web browser extension]. Chrome Web Store. https://chrome.google.com/webstore/detail/opendyslexic-for-chrome/cdnapgfjopgaggbmfgbiinmmbdcglnam?hl=en

Accessibility for Ontarians with Disabilities Act. (2005, S.O. 2005, c. 11). https://www.ontario.ca/laws/statute/05a11

Coolidge, A., Doner, S., & Robertson, T. (2018). BCampus open education accessibility toolkit. BCampus. https://opentextbc.ca/accessibilitytoolkit/ 

Colorado State University. (2022). Reading order. Accessibility by Design. https://accessibility.colostate.edu/reading-order/

Council of Ontario Universities. (2017a). Accessible digital documents & websites. Accessible Campus. https://accessiblecampus.ca/reference-library/accessible-digital-documents-websites/

Council of Ontario Universities. (2017b). Accessibility in e-Learning. Accessible Campus. https://accessiblecampus.ca/tools-resources/educators-tool-kit/course-planning/accessibility-in-e-learning/

Doyle, J. (2021, May 26). A complete overview of Canada’s accessibility laws. Siteimprove. https://siteimprove.com/en-ca/blog/a-complete-overview-of-canada-s-accessibility-laws/

Dyslexia Canada. (n.d.). Dyslexia basics. https://www.dyslexiacanada.org/en/dyslexia-basics

Essential Accessibility. (2018, May 02). Understanding WCAG compliance checkers and their shortfalls. Essential Accessibility. https://www.essentialaccessibility.com/blog/wcag-compliance-checkers

Google. (2021, July 27). Screen Reader (Version 53.0.2784.13) [Web browser extension]. Chrome Web Store. https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

Google. (2022). Add subtitles and captions. Google Support. https://support.google.com/youtube/answer/2734796?hl=en

Google for Education. (n.d.). Working to make Google for Education more accessible for everyone. https://services.google.com/fh/files/misc/education_accessibility.pdf

Harvard University. (2022). Write good Alt Text to describe images. Digital Accessibility. https://accessibility.huit.harvard.edu/describe-content-images

Instructure. (2022). How do I use the Accessibility Checker in the Rich Content Editor as an instructor?. Instructure Community. https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-use-the-Accessibility-Checker-in-the-Rich-Content/ta-p/820

Mada. (2021). Mada assistive technology centre. https://mada.org.qa/en/Pages/default.aspx

Microsoft. (2022a). Improve accessibility with the Accessibility Checker [Web page]. Microsoft Office Support. https://support.microsoft.com/en-us/office/improve-accessibility-with-the-accessibility-checker-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f

Microsoft. (2022b). Listen to your Word documents. Microsoft Office Support. https://support.microsoft.com/en-us/office/listen-to-your-word-documents-5a2de7f3-1ef4-4795-b24e-64fc2731b001

Morton, R. (2016, June 17). Colour contrast – why does it matter?. Accessibility in Government. https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/

NV Access. (2021). Join the NVDA Revolution! Finally, a fast, functional, & totally free screen reader. https://www.nvaccess.org/about-nvda/

Ontario Human Rights Commission. (2016, January 6). New documentation guidelines for accommodating students with mental health disabilities. https://www.ohrc.on.ca/en/news_centre/new-documentation-guidelines-accommodating-students-mental-health-disabilities

OpenDyslexic.org. (n.d.). OpenDyslexic: A typeface for Dyslexia. https://opendyslexic.org/

The Paciello Group. (n.d.). Colour contrast analyzer (CCA). https://developer.paciellogroup.com/resources/contrastanalyser/

Pennsylvania State University. (2021). Headings and subheadings. Accessibility at Penn State. https://accessibility.psu.edu/headings/

Power, R. (2020, February 13). Helping everyone access your online learning resources. Power Learning Solutions. https://www.powerlearningsolutions.com/blog/helping-everyone-access-your-online-learning-resources

Power, R. (2022). Digital accessibility. Power Learning Solutions. https://www.powerlearningsolutions.com/digital-accessibility.html

Wald, M., Draffan, E. A., & James, A. (n.d.). Digital accessibility: Enabling participation in the information society [MOOC]. FutureLearn. https://www.futurelearn.com/courses/digital-accessibility

W3C. (2022). Web Content Accessibility Guidelines (WCAG). [Web page]. https://www.w3.org/WAI/standards-guidelines/wcag/

About the author

name: Rob Power

institution: Cape Breton University

website: https://www.powerlearningsolutions.com/

Dr. Rob Power is an Assistant Professor of Education with Cape Breton University, Past-President of the International Association for Mobile Learning, and President of Power Learning Solutions. With over two decades of experience in the education sector, he specializes in instructional design for online and digital learning and educational technology integration. He has a personal passion for investigating and helping teachers learn about Digital Accessibility issues and how to leverage digital tools to support their students.