Planning your Canvas courses and preparing resources with accessibility AND usability in mind can save hours of time down the line. A Universal Design best practice would be to develop and create your content first and then work on a simple and cohesive design style and layout.

Content

Content is the material that is presented to your students to support achieve the learning outcomes of the course. Content includes items like readings, presentations, quizzes, discussions, and assignments.

Design

Headings

When creating content, always use headings. So, what’s a heading? Headings break-up the text into chunks, making it easier for all to digest the information. When you add a heading, use the Heading feature rather than just changing the size of the font or making it bold. This will make it more universal and accessible to screen readers. (In EDIT mode of a Canvas page, change the heading by highlighting the text and selecting a Heading from the right lower menu on the editor).

The best practices for designing online courses are to make them simple, yet effective. It can be tempting to add several different colours, font sizes, and images, but consider whether or not this kind of content is achieving the learning objectives of the course or if it is simply filler.

Colour

The best practices for designing online courses are to make them simple, yet effective. It can be tempting to add several different colours, font sizes, and images, but consider whether or not this kind of content is achieving the learning objectives of the course or if it is simply filler.

Provide good colour contrast.

Black text on a white or light background is the most readable.
Patterns and images behind text make it more difficult to read.

Do not use colour alone to convey meaning.

The use of colour to convey meaning may result in your images or information not being accessible to students who are colour blind.
Some students may choose to print materials using a black and white printer. The images would not be meaningful once printed.

Here is an example of a map where colour alone was used to convey meaning and another showing how it was improved to increase usability. In the first one, only red and blue squares are used in the legend. In the improved one, red stars and blue squares are used to more clearly differentiate.

Map using red and blue squares to indicate meaning

map using red stars and blue squares to indicate meaning

Another way that colour is sometimes used to convey meaning is to differentiate items in a list. For example, a professor may write the following: “All assignments in red must be completed in APA style.” This poses a problem for students who are blind and students who are colour blind. Consider the use of text size, placement, and styles like bold or itatics to illustrate differences.

Font

Choose a sans serif font such as Arial or Helvetica for your text. These fonts are easier to read for most people but especially for those with low vision. For best practice in Canvas, just use the default font. This is Arial.

Let's take a look at a bad example of design and a good example of design in an online course.

Canvas Content Page: Bad Example:

Hover over the image and then the letters within the image to see the mistakes with this online course design.

Overall, it is unclear to a student what is important on this page and there are one too many colour schemes. The mistakes are listed below.

A. Neon colours are hard to read and have poor contrast on a white background.

B. Centered paragraphs are not recommended because the layout is not easy for people to read left to right.

C. Black text highlighted in red is very hard to read.

D. Long urls are often mistyped and are not descriptive as to where the link takes a student. Provide context and make the link in-line with the text.

E. The image breaks up the text flow and the image also has zero relevance to the course content.

Canvas Content Page: Good Example:

Hover over the image and then the letters within the image to see how the instructor improved the course design.

This is a much better layout and design for a content page in Canvas. Listed below are the items that were improved in the above image.

A. Proper use of headers

B. Proper use of paragraph alignment

C. Better colour contrast

D. In-line links with context and descriptions

E. Proper placement of the image, does not break up text. Also, this image is relevant to the content.