This post is the third in a three-part series adapted from a workshop given by ODL course developer Clarissa Anderson at the 2022 OU Online conference. In this first part, we explored the disability and the need for accessibility. In part 2, we looked at Universal Design for Learning, and in part 3 we cover how to design accessible content in Canvas specifically.

When designing Canvas pages, there are four main accessibility principles you should consider. Ask yourself, is the content…

  1. Perceivable – Can a wide variety of users access the content, regardless of their abilities?
  2. Operable– Can everyone navigate the pages and find what they’re looking for?
  3. Understandable – Does it make sense? Is it reasonable in its organization and content?
  4. Robust – Does it accomplish your educational goals and quality control standards?

With those four principles in mind, let’s look at a few specific things you should focus on when designing Canvas pages for accessibility.

Accessible Documents

Icons for different file types from Microsoft Office and Google Drive: documents, spreadsheets, and slides

When building a course, remember that all course materials and files must meet accessibility standards, not just the Canvas pages themselves. That means any document you upload to the course should be accessible.

Many programs, including Microsoft Office products, have built-in Accessibility Checkers. These are great places to start but aren’t guaranteed to catch every issue.

Core accessibility concepts apply to all programs. But not every program is naturally equally accessible. For example, PDFs are extremely common in online learning, but they are comparatively much more difficult to make accessible than Word documents. 

Assistive Technology

Assistive technology includes any device, software, or equipment that helps people with disabilities learn, communicate, or function better. When designing a course, you need to consider assistive technology usage, but also remember that assistive technologies cannot completely overcome inaccessible content. 

Screen readers are a very common assistive technology. This app will help people with low vision access visual web pages by reading what is on the screen. Screen readers read pages in a sequential way, using HTML markers to allow users to navigate the page. The best way to understand their importance is to watch a demonstration of someone using a screen reader:

A recent WebAIM survey of screen reader users reported their views on document accessibility and preferences. The vast majority of screen reader users said Word documents were the most accessible (68.9%) and also their preferred document type (60.6%). 

Accessibility Skills

Canvas has a built in Accessibility Checker that can help you improve your course pages, but in order to make accessible content on Canvas, there are eight core skills to focus on:

1. Alternative Text 

In order to be accessible, images need what’s called alt text, which describes the meaning and context of informative images. For complex images that contain a lot of information, alt text isn’t sufficient and developers should instead provide a description and/or caption. The bottom line: there should always be a text equivalent to visuals. For examples, notice how the images below all have alt text.

2. Contrast 

Consider colorblind users and other users with low vision. There should always be a minimum color contrast between the background and text. If you want to emphasize a word or phrase, consider using bold instead of a bright color because those colors can be difficult for some users to see clearly. Putting a dark outline or drop shadow can also help images stand out a bit more. There are several apps online to help you check the contrast of a page, including the Deque Color Contrast Analyzer.

A side by side comparison with examples of good contrast on the left and bad contrast on the right

3. Headings 

Use headings to break up content wherever it seems helpful. Use the platforms’ heading tags instead of text/paragraph formatting to make sure screen reader users can navigate the page easily. Also, it’s very important to not skip levels (meaning don’t move from H1 to H3 even if you like how it looks). When developing the CSS, you should make sure that higher level headings are larger sizes as well.

A screen capture of the headings menu in Canvas

4. Links 

Links should be descriptive, meaningful, and context independent. Users should be able to quickly recognize a link and know exactly what page it leads to, even without the context. Links should also be clear to see. It’s a good idea for links to be underlined, bolded, and a different color. This is one reason to avoid having non-link text underlined.

Good and bad examples of hyperlink text in three categories: descriptive, meaningful, and context independent

You should also double check all your links to make sure they still point to where you want them to. You can automate some of this process with the Canvas Link Validator, but it is also a good idea to periodically manually check because the validator won’t always find all issues (for example, if the link still works but just goes to the wrong web page).

5. Lists 

Consider list styles and how scannable they are. You don’t want your lists to be overly complicated or use too many styles. Lists are great, but you should make sure they run in order from start to finish.

6. Tables 

Tables can be tricky to make accessible. In general, they should be straightforward and designed to ensure proper reading order. Also, make sure every box is filled in order to avoid confusion.

an example of an inaccessible table on the left and an accessible table on the right

7. Multimedia 

Every video should have accurate (meaning human-checked) video captions. This can be a difficult process, but it’s important to make sure captions and/or transcripts are accurate and complete. Automated transcription can be a good start but will never be completely correct. See below for more tips on specific multimedia technologies like Zoom.

8. Mobile Compatibility

According to the University of Central Florida’s Division of Digital Learning, 98% of students use the Canvas app at least once a week. The takeaway here is to make sure to build your pages with responsive design and think about how the content will display on devices of various sizes. Especially think about your tables, video and document embeds, and photos (setting photo sizes to 100% instead of pixels will ensure they always fit).

Multimedia and Web Conferencing

Wherever you upload your pre-recorded videos, you should make sure the player is accessible and the captions/transcripts are correct. This means the captions need to be edited by a human transcriber. Unedited auto captions will only be at most 70-80% correct, and 99% accuracy is required.

Zoom is generally considered to be very accessible as a platform, but there are still some important things to remember:

Before the live session, you should make sure to share resources and lecture slides so students have access to everything. You should also customize the default settings (chat and caption font size for example) to make sure everyone can engage well.

During the live session, you will want to make sure you verbally describe what you are doing or what is on screen. Make sure your sound quality is good (consider using a microphone) and do what you can to reduce background noise. You also want to make sure to share important chat content aloud so everyone can know what is going on. Finally, make sure all members can participate in polls. You should always verbally announce the poll and give sufficient time for everyone to respond.

After the live session, share the recording of the session with captions/transcript.

Accessibility Moving Forward

There is always more to learn about accessibility, and there will always feel like ways you can make your content more accessible. There are two important things to remember, though:

  1. Accessibility features are helpful for all users. They don’t make the course less rigorous; they just help everything engage fully. 
  2. Second, it doesn’t have to be perfect right away. Remember Plus One Thinking. What is one thing that is making this course difficult for students, and what is one thing you can do to eliminate that problem?

Hopefully these posts and resources will help you make your courses more accessible and therefore more successful for all students.

References and Additional Resources

Inclusive Instructional Design

Edyburn, D.L. (2015). Accessible Instructional Design. Emerald Publishing Limited, 2015. ProQuest Ebook Central.

Instructors. (n.d.). AccessibleU, University of Minnesota.

Rao, K. (2021). Inclusive Instructional Design: Applying UDL to Online Learning. The Journal of Applied Instructional Design, 10(1).

Seale, J. (Ed.). (2020). Improving accessible digital practices in higher education: Challenges and new practices for inclusion. Palgrave Pivot, Cham.

Singletone, K.; Evmenova, A.; Jerome, M.K.; & Clark, K. (2019). Integrating UDL strategies into the online course development process: Instructional designers’ perspectives. Online Learning, 23(1), 206-235.

Accessibility

Accessibility Reference – Semantic Elements. (2022). OU Libraries Guide.

The “Curb Cut” Effect: An Accessible Web Benefits All. (2019). Introduction to Web Accessibility by Ryerson University, The Chang School.

Burgstahler, S. (2021). What higher education learned about the accessibility of online opportunities during a pandemic. Journal of Higher Education Theory and Practice. 21(7): 160-170.

Deque Color Contrast Analyzer. (n.d.) Deque University.

Kriger, S. (2022). Accessibility Myths. A11ymyths.

Matz, A.; Bosak-Schroeder, C.; & the CripAntiquity Community. (2020). Making Graduate Programs More Accessible

Myths About Accessibility. (n.d.). Texas A&M Division of Information Technology.

Screen Reader User Survey #9 Results. (2021). WebAIM.

Technology

Accessible Best Practices for Zoom Meetings. (n.d.). Yale University ITS Services.

Canvas Tool Accessibility. University of Minnesota Course: Creating Accessible Canvas Courses.

Gernsbacher, M.A. (2015). Video Captions Benefit Everyone. Policy insights from the behavioral and brain sciences vol. 2,1: 195-202.

How do I use the Accessibility Checker in the Rich Content Editor as an instructor? (n.d.) Instructure Community.

How do I validate links in a course? (n.d.). Instructure Community.

Lewis, Elisa. (2022). 8 Benefits of Video Transcription & Captioning. 3Play Media.

Stritto and Linder. (2017). A Rising Tide: How Closed Captions Can Benefit All Students. EDUCAUSE.

Video Accessibility. (n.d.). California State University Northridge Universal Design Center.

Zoom Accessibility Best Practices. (n.d.). Montgomery College Universal Design Center. 

2018 Canvas Mobile Survey. University of Central Florida Division of Digital Learning.