General accessibility tips for Canvas course creators

I have been using the Canvas LMS since 2016 when Ohio State switched the ‘Carmen’ learning platform from being powered by D2L to use the Instructure Canvas platform. I want to get people interested in doing accessible practices in their online Canvas courses and raise awareness of the upcoming deadline: April 24, 2026, when all materials produced by public universities should be accessible, according to the new ADA Title II regulations. I think it will take all faculty and staff at universities working together to meet that deadline. – Jon, 9/24/24


Canvas course material accessibility presentation for the Ohio Canvas User Group Conference


General accessibility tips for Canvas course creators fact sheet topics

[ General accessibility tips for Canvas fact sheet ePub coming soon ]

Here are some general web accessibility principals that Canvas course creators can keep in mind to make their course pages more accessible. These principles also apply to working with webpages in general, since course pages are in HTML format. Learning management systems and content management systems use similar WYSIWYG editors for updating the HTML content of a webpage.

TOC


Accessibility testing:

Check your course page with the built-in accessibility checker in the RCE (rich text editor):

Some learning management platforms, like Canvas, have built-in accessibility checkers. The one in Canvas can be found in the options of the course page rich text editor (RCE). To use it, edit a course page and click the accessibility checkers icon. An issues panel appears on the right side of your screen and will walk you through each issue and give you the opportunity to fix them. If an image is missing alt text, the checker will let you enter an alt description.
See this how to use the Accessibility Checker in the RCE article for more information. Below is a screen of the accessibility checker finding missing alt text.
Sscreenshot the accessibility checker in the RCE finding missing alt text.

Check your course page with the WAVE accessibility checker:

The WAVE tool is available as a browser extension for Chrome, Edge, and Firefox and will allow you to check your webpage for accessibility issues in one-click. The checker will show you exactly where the issues are in the code and provide advice on how to correct them.


Images

Add alternative text descriptions to your images:

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load. Focus on the meaning or purpose of the image rather than trying to describe every detail. In the Canvas LMS while editing a course page we can click on an image, click on the ‘Image Options’ button that pops up, and enter alt text in the Image Options pane that appears on the right-side of our screen.
Screenshot showing adding alt text in the Canvas RCE.
See this article about alt text and display options for images added with the RCE for more information.


Headings

Use headings properly:

Be sure to separate your content into sections, especially in longer articles, and use headings correctly. In the editor, it may appear that headings are like font sizes, but they are more for structural usage. You shouldn’t pick a lower heading size because you like the font size of it. Headings need to be properly nested in a heading structure where you shouldn’t skip heading levels. For example, you shouldn’t go from an H1 to an H3. That H3 should be an H2 to be properly nested in the heading structure. While editing a course page, you can change highlighted text to a heading by clicking on the ‘Paragraph’ menu in the rich text editor. Under that menu you’ll find several heading level options.
Screenshot showing that there are several heading level options under the Paragraph menu in the RCE in Canvas.

Here are some articles about using headings in the RCE:


Use of color

Make sure all text has sufficient color contrast:

Small or regular-sized text should have a contrast ratio of 4.5:1 and large text (bold and 18px or higher or normal and 24px or higher) should have a contrast ratio of a least 3:1. You can use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool to find the color contrast ratio. Also, make sure no content or visuals rely on color alone to communicate meaning. Use other ways to differentiate visuals to aid color-blind users.
You can find out more about adjusting color contrast in this Color Contrast in Canvas article. This Adjusting color contrast with the accessibility checker article is another good resource.


Make sure your hyperlinks are descriptive and not just ‘click here’ links

Making link text more descriptive helps give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So, a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.
See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.


Tables

Make sure you only use tables for tabular data:

Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice and not responsive to smaller screens.
See this inserting tables using the Rich Content Editor article to learn more about working with data tables in Canvas.

Make sure your data tables have a header row specified:

Each label on a column should be a true header cell TH instead of a regular cell TD. In Canvas you can tell that something is a header cell by clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tag tree it’s a header cell. For example, the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is in the lower left side of the editing window. If you know HTML you could also switch to the code view and check the first row’s cell tags. They should be TH tags rather than TD.

Below is an example of a table created in the Canvas RCE where a header row has been specified. Notice the different styling of the first row. Screenshot of a table in Canvas that has had a header row specified.
The RCE table editor doesn’t allow you to specify header cells. You have to use the accessibility checker in the RCE to do that. It will analyze the table you created and give you an opportunity to specify a header row. Here is a screen of specifying a header row with the accessibility checker.
Screenshot of specifying a header row for a table in Canvas.

The accessibility checker will ask you to add a caption to your table. If you already have a descriptive heading immediately above the table, an additional caption isn’t required.

Avoid using complex tables:

You should avoid using complex tables because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.
See WebAIM’s article about Creating Accessible Tables for more information.

 


Additional resources about online course accessibility:

Beginner’s Accessibility with the Rich Content Editor
How to use the Accessibility Checker in the RCE
Color Contrast in Canvas – an article about adjusting color contrast in the RCE.
Adjusting color contrast with the accessibility checker  – a good resource on fixing color contrast issues in Canvas course pages.
Inserting tables using the Rich Content Editor  – an article about working with data tables in Canvas.

How writing evergreen content can extend the impact of your blog

One way to work more efficiently and extend the impact of your blog is to create what’s known as ‘evergreen content’. This is content that isn’t tied to a specific date or month, writing about subjects that are more timeless. Keeping up with blog posting can be a challenge if every post is date specific. It can be a good strategy to mix in some evergreen posts that will have a longer shelf life. Then you get a longer benefit for your post writing efforts.

Another idea, similar to writing evergreen content, is to write seasonal content that can be reused year to year. You might create winter, spring, summer, and autumn content that isn’t tied to a specific year, making it more reusable. It can be more efficient to preplan and schedule posts once a month or once a quarter, than to be always be publishing ad hoc.

Managing a blog is like tending a garden. It’s best to do routine checks and maintenance every month to keep your blog healthy like doing periodic content audits and accessibility checks. ‘Link rot’ is something that happens over time where links become broken. As part of the blog’s monthly maintenance, content managers should go through their site and look for broken links. WordPress makes it easy to spot broken links by crossing them out with a strikethrough. Blog authors can look for strikethrough links each month and update the URLs that they point to. Links become broken in websites because the URLs of external webpages they link to change over time from organizations adjusting the structure of their websites.

If you run a blog with multiple authors, it’s likely that web accessibility errors will pop up over time. It would be a good practice to run periodic accessibility checks as part of the blog’s monthly maintenance plan. WAVE is a free tool that is good at finding accessibility issues in individual pages. To check a large blog or website, site scanning services like PopeTech can be used. Many organizations at Ohio State have access to scan their sites with PopeTech. For smaller blogs, authors may find it more convenient to install the WAVE browser extension which can check a page for issues in one click. Forming a plan to train authors about accessible content authoring can also help lower the number of accessibility issues that pop up over time. Ohio State offers several online courses about web accessibility through the Digital Accessibility Services office (DAS).

Resources:

Evergreen Content: What It Is, Why You Need It, & How to Create It by Si Quan Ong – Updated on May 8, 2019.

Evergreen Blog Posts: Content Ideas, Examples, and Tips by James Parsons – Updated Jan 4th, 2022

Link Rot: What It is and How to Deal with It by John Hughes – Updated on Jan 25, 2023