Body
General accessibility tips for Canvas course creators topics
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.
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.
See this article about alt text and display options for images added with the RCE for more information.
The Alt text decision tree app from EHE is a tool that can help you decide if an image needs alt text and what type. It will also let you know it's a complex image and requires a long description. Charts and graphs are a type of complex image that requires a description below the image longer than what short alt text can provide.
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.
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.
Links
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 within 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. 
Note that 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.
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: