#1: Content First, Then Design

Planning online courses 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

Creating an outline or course map for your content can help you keep the online course and learning objectives a top priority. The course map shown was created using Bubbl.us Links to an external site. and it illustrates how you might want to organize your content in order for it to be most effective for your students. 

When we refer to content, we mean the material that is presented to your students to achieve the learning outcomes of the course. Content includes items like readings, presentations, quizzes, discussions, and assignments. Once that's decided, form and design come next.

Design

The best practices for designing online courses are to make them simple, yet effective. It can be tempting to add several different colors, 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.

Headers & Text

When creating content, always use headings. 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).

• Canvas has a variety of built-in styles and layouts that allow for accessible design. All text in your course, including main body text, headers, and links, should be as clear and concise as possible. The General Accessibility Design Guidelines for Canvas Links to an external site. offer some best practices.
• Use different heading levels (Heading 1, 2, 3, etc. to clearly mark sections of your course and indicate how content is ordered and related.
• Use the heading labels in Modules to mark distinct sections.
• Always use a label for link text; never post only the link unless there is sufficient context or the link itself is short and provides the context
• Use descriptive labels for link text. Avoid using "click here" or "link to" as labels.
• Create bulleted and numbered lists using the Canvas Rich Content Editor. The built-in lists provide a navigational structure for those students using screen readers. 

Color

Color contrast should be high for easier reading, especially for students with low vision or color blindness.

• 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 color alone to convey meaning.

• The use of color to convey meaning may result in your images or information not being accessible to students who are color 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 color 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.

Another way that color 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 color blind, many of whom use screen readings, which don't detect color. Consider the use of text size, placement, and styles like bold or italics 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.

Good vs. Bad Design

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

Bad Example:

Hover over the numbers on the image to see the mistakes with this online course design.

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

2. Neon colors are hard to read and have poor contrast on a white background.

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

4. 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.

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

Good Example:

Hover over the numbers on 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.

1. Proper use of headers

2. Better color contrast

3. Proper use of paragraph alignment

4. In-line links with context and descriptions

5. Proper placement of the video, does not break up text

6. A relevant image to the content

More Examples

Additional examples of good vs. bad design can be found in the Accessibility Demo.