Categories
Canvas Course Design

Set the Course Navigation

The first thing you should do before publishing the course is to edit the Course Navigation. Unlike Blackboard, the instructor control of the Canvas Course Navigation is a bit more restrictive.

Course Navigation items include:

  • Home (Required)
  • Announcements
  • Assignments
  • Attendance (Hidden unless made available)
  • Chat (Hidden unless made available)
  • Collaborations
  • Conferences
  • Discussions
  • Files
  • Grades
  • Modules
  • Outcomes
  • People
  • Pages
  • Quizzes
  • Syllabus
  • Settings (Visible to Instructors and TAs)

Instructors can reorder the tabs and even hide some of them. Tabs cannot be renamed. The purpose of this restriction is to attempt to streamline and simplify the menu options presented to students.

Course Navigation Tutorials

Categories
Canvas Course Design

About Conferences

Canvas has integrated a web conferencing tool called Big Blue Button to extend the learning environment to the virtual space enabling synchronous (real-time) online meetings. Conferences allows users to

  • broadcast live audio and video
  • demo applications on your desktop
  • share presentation slides
  • demo any online resources

Conferences have a number of potential uses for both traditional face-to-face as well as distributed learning situations. Some possible use cases include virtual:

  • lectures
  • office hours
  • student group meetings
  • study groups

Students can even create their own conferences if they have:

  • Access to the Conferences menu item within a course
  • Have been placed within Groups
    The Conferences tool is a standard tool available to Student Groups in Canvas.

To learn more about Conferences in Canvas, feel free to view the Conferences Overview Video and the Conference Tutorials on this page.

Conference Tutorials


Questions?

For questions about how these features might be implemented into a course design/course activities, please contact Geisel Instructional Technology Staff to schedule a one-on-one session to discuss these tools.

Categories
Canvas Course Design

What are Collaborations

Canvas integrates Google Docs to allow multiple users to collaboratively edit documents. Since the Google Docs and EtherPad document changes are saved in real-time, changes made by any of the documents multiple editors are immediately visible to everyone with access to the document.

Google Docs

To learn more about the Collaboration tools in Canvas, feel free to review the Collaboration Overview Video and the Collaboration Tutorials linked to from this page.

Collaboration Tutorials


Questions?

For questions about how these features might be implemented into a course design/course activities, please contact Geisel Instructional Technology Staff to schedule a one-on-one session to discuss these tools.

Categories
Canvas Course Design

About Groups

With the Groups feature in Canvas, instructors can organize the students into groups so they can work together on group projects and assignments: a paper, a presentation, etc. A Canvas group will provide students with a collaborative workspace where they can work in that small group to share files, hold video conferences, or work on group assignments created within the course.

Within Groups, instructors can:

  • Create a new group set and create subgroups automatically or manually
  • Assign students to subgroups automatically or manually
  • Allow students to sign up for their own groups
  • Expand and collapse subgroups
  • Move students into different subgroups
  • Create group collaborations
  • View all activity within all the groups within a course
  • View all created groups within the course
  • Edit or delete group sets

To learn more about groups, feel free to watch the Groups Management Video and the Groups Tutorials listed below.

Group Assessment Tutorials

More Group Tutorials


Questions?

For questions about how these features might be implemented into a course design/course activities, please contact Geisel Instructional Technology Staff to schedule a one-on-one session to discuss these tools.

Categories
Course Accessability

Image Identification

There is one (1) guideline for images presented in a digital context:

  • Images should be accompanied by an “alt” attribute.

The “alt” attribute allows you to enter a short textual description of the image that tells the user more about the content or function of the image. The “alt” attribute serves to provide a textual description of the images that :

  • can be read by screen readers used by individuals with visual or cognitive disabilities.
  • appear within a browser in the event the images do not load on the page.
  • can be identified by search engines that can help a user find content online.

Below are a few scenarios and examples.

Empty Alt Tag

If the text or narrative in the vicinity of the image conveys the content of the image, it is acceptable to leave an empty alt attribute.

Example:

“The placement of the emojis on the brain image are not necessarily representative of where the emotional response and associated language development actually occur.”

Alt = ” “

Canvas Empty Alt Example

When adding an image to a page in Canvas, the Alt text field in the Attributes section can be left blank when the surrounding text properly conveys the content of the image.

Descriptive Alt Tag

If the text or narrative relates to the image but does not directly describe the image the “alt” attribute should provide a description of the image.

Example:

a brain composed of emojis

“The effect of emoji use in text messaging and other digital communications on emotional development and language expression are as yet unknown.”

Alt = “a brain composed of emojis”

Canvas Descriptive Alt Example

When adding an image to a page in Canvas, the Alt text field in the Attributes section should be completed when the text or narrative does not directly describe the content of the image.

Images as Links Alt Tag

When an image is also used as a link or button, the “alt” attribute should reflect the function of the image.

Example:

Huffington Post Article on Emojis and Language Development"
This image is being used as a link to an article; as such, the "alt" text indicates that this image links to the article.

“A recent article in the Huffington Post outlines the effect of emojis use on language development in children.”

Alt = “Huffington Post Article on Emojis and Language Development”
This image is being used as a link to an article; as such, the “alt” text indicates that this image links to the article.

Canvas Functional Alt Example

When adding an image to a page in Canvas that is also a link to a URL or other resource, the Alt text field in the Attributes section should be completed with text that describes the function or purpose of the image.

Resources

  • Alternative Text This webpage outlines the role of “alt” tags in properly identifying images in digital content.
Categories
Course Accessability

Formatting Tables

The following four(4) guidelines pertain to formatting tables for digital content:

  • Tables should only be used to present data; they should not be used to control page layout.
  • The row containing the column headings should be identified as a header row.
  • Use the simplest possible table configuration. Avoid extra rows or columns for spacing. Avoid nesting tables and keep cell merges to a minimum.
  • Ensure table size is controlled by percentages not pixels.

Table Use

The purpose of a table is to present data not to format document or page layout.

Good Example:

Pet TypeAgeGender
dog2 yearsFemale
cat10 monthsMale

Bad Example:

Available Pets
Bloomers 2 years old female loves to playpicture of a yellow lab
picture of a kittenRascal 10 months old male loves bird watching

Table Headings

Without the designation of column header or just heading, the content in the first row of a table is just data. It is important that the first row of the table be formatted as a heading row. This calls out the type of content the user should expect to find within the cells in that column.

Good Example:

Pet TypeAgeGender
dog2 yearsFemale
cat10 monthsMale

Bad Example:

Pet TypeAgeGender
dog2 yearsFemale
cat10 monthsMale

Adding Table Headers in Canvas

Thankfully, Canvas has a very functional table editor. Unfortunately, the editor does not automatically recognize the first row of a table as a header row. The following are instructions for how to identify the first row of a table as a header row.

  1. Select the first row of the table.
  2. From the table formatting icon, select Row.
  3. From the row options, select Row Properties.
  4. From the General Tab, select Header from Row Type.
  5. Click [OK].

Table Configuration

Tables should be simple and straight forward avoiding empty rows/columns, merging cells, and other actions that may be construed as trying to control the layout of content.

Good Example

Pet TypeAgeGender
dog2 yearsFemale
cat10 monthsMale

Bad Example

Available Pets
DogsCats
2 yearsFemale10 monthsMale
loves to playContact us to adopt.loves bird watching

Setting Table Width in Canvas

Setting the table width to calculate as a percentage rather than a specified pixel count allows the table to more easily reformat for various screen sizes. While 100% would be the most desired table width, the design of Canvas necessitates the table width to be set to 95% instead. This width is already set in the Geisel Templates, but if you are adding additional tables you can set the table width as follows:

  1. Select the table.
  2. From the Table icon, select Table Properties.
  3. From Table Properties, enter 95% in the Width field. (There is no need to set table height.)
  4. Enter 1 into the Border field to add lines around the table and the cells. (Optional, but it looks nice.)
  5. Click [OK].

Resources

Categories
Course Accessability

Color Contrast

There are three(3) guidelines for the use of color in digital materials:

  • Do not rely on color alone to convey page information
  • Provide good color contrast between text and backgrounds
  • Coloring font for emphasis is unnecessary

Colorblindness

An individual affected by colorblindness will have difficulty distinguishing colors in images and text; exactly which color depends upon the type of colorblindness the individual has. Below are some images from the WebAIM website that illustrate the experience of an individual with various types of colorblindness.

Protanopia (Red deficiency)

NormalProtanopia
Image as seen by individual with normal vision
Note the green, red, and orange colors in the image.
Image as seen by individual with Protanopia
Note the lack of green, red, and orange in the image.

Deuteranopia (Green deficiency)

NormalDeuteranopia
Image as seen by individual with normal vision
Note the green, red, and orange colors in the image.
Image as seen by individual with Deuteranopia
Note the lack of green, red, and orange in the image.

Tritanopia (Blue deficiency)

NormalTritanopia
Image as seen by individual with normal vision
Note the blue, green and yellow colors in the image.
Image as seen by individual with Tritanopia
Note the absence of blue, green, and yellow in the image.

Text and Backgrounds

The article, Color Blindness and Web Design, indicates that

“Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.”

The idea of a website or PowerPoint that is solely designed in grey scale can seem “un-creative”, but remember the goal of the end product. In the case of the Canvas site and even a PowerPoint the goal is to communicate and deliver content. This is not to say that color cannot be employed just that it should be done thoughtfully so as not to impede the students ability to engage with the content.

Text and Background Contrast

The following are some examples of text and background color contrast. When in doubt, use the Color Contrast Checker and ask others for assistance.

Black on Light Grey

This color combination passes all levels of accessibility and can help reduce screen glare.

Light Grey on Black

Similar to the above, the color combination of light grey text on a black background passes all levels of accessibility.

Dartmouth Green on White

Surprisingly, this color combination does not pass all levels of accessibility.

White on Dartmouth Green

As in the image above, the color combination of white text on Dartmouth green does not pass all levels of accessibility.

Resources

  • Visual Disabilities This webpage outlines visual disabilities including blindness, low vision, and color blindness.
  • Color Contrast Checker This webpage allows users to test combinations of text color and background color to determine if they are accessible.
  • Colorblindness and Webdesign This website outlines some of the webdesign practices that work well for individuals with colorblindness.
  • Color Visual Examples This webpage presents visual examples of how individuals with various types of colorblindness see the world.
  • Color Contrast for Better Readability This webpage outlines ways to use color contrast to improve the readability of digital content.
Categories
Course Accessability

Content Links

There are two(2) guidelines for links to URLs or content within digital materials:

  • Make sure links are recognizable.
  • Make sure link text makes sense on its own.

The following information outlines the meaning of these guidelines and how to accomplish them in Canvas.

Recognizable Links

There are two important factors to ensuring a link is recognizable.

  • make sure the hypertext appears in a different color consistently throughout the course
  • make sure the link, when activated appears underlined and/or highlighted to call attention to it.

Example: Refer to the student handbook for more information about Geisel policies.

Note that the link color is different from the surrounding text and that when the cursor finds the link that it becomes underlined and highlighted. See the Canvas example below to see how it should look within the learning management system.

Recognizing Links in Canvas

In Canvas, text with a hyperlink will appear blue (or another color as defined by the users browser settings). When the cursor rolls over the hyperlinked text, the text will be underlined and the cursor will change.

Descriptive Link Text

The most important feature of hyperlinks is that the description of the content available through the link it clear to the user. This is often referred to as “Human readable.” It is also important to inform the user if the link will open in a new window.

Good Examples:

Poor Examples:

Note that the last poor example is simply adding the url to the page. While this would seem appropriate, a screen reader will read the whole thing to the user which is difficult to follow.

Descriptive Links in Canvas

How descriptive a link within a Canvas page is relies on the individual designing the pages.

A bad example would be to simply place a link on the text describing the document type.
(Example: pdf)

A good example would be to write out the description of the content.
(Example: “Immunogobulin Lecture Notes”)

Resources

  • Links and Hypertext This webpage outlines the approaches to ensure accessible web and document links within digital content.
Categories
Course Accessability

Formatting Text

There are four(4) guidelines around text formatting for digital content:

  • Apply appropriate document structure.
    • use headings (Do not simply use larger font sizes and bolding).
    • use numbered and bulleted lists (Do not use tabs and dashes to create lists).
  • Use Adequate Font Size (10pt minimum)
  • Avoid the use of all CAPS for emphasis. (Can be difficult to read and read incorrectly by screen readers).
  • Use true text. (Do not substitute images of text for actual text).

Font color is discussed in the Color Contrast section.

Document Structure

Headings and lists give structure to the content presented digitally. Screen readers rely on headings and lists to communicate the structure of the content to the user.

Headings

Like reading a book or an article, headings let you know what that section of narrative is about and where the focus of the narrative may change within the text.

Lists

Lists let the reader

  • identify important points or items (like ingredients in a recipe)
  • outline a particular order of operations (like instructions for baking a cake)

Using the built in formatting tools in Canvas, Word, PowerPoint, and other programs ensures that the headers and lists can be properly identified by screen readers and anyone reading the documents.

Canvas Tools for Document Structure

The images below illustrate the Canvas tools in the Rich Text Editor for creating headers and lists.

Headings in Canvas

Lists in Canvas

Bullet List

Numbered List

Text Format

Properly formatting font is extremely important, particularly for individuals with varying degrees of visual acuity.

Properly formatted text will resize on a screen making it easy for everyone to read it on any device sizes such as iPads, cell phones, and laptop screens.

 Common tips for font formatting include:

  • Select readable font types
    • straight fonts (san-serif) read well online (Arial, Helvetica, Tahoma, Trebuchet, Verdana)
    • curved fonts (serif) fonts do not read well online (Book Antiqua, Georgia, Times, Times New Roman)
  • Select appropriate text sizes (minimal acceptable font size is 10 pt)

Canvas Tools for Text Formatting

Font Type

The Canvas default font is Open Sans. It is not possible within the Rich Text Editor to change the default Canvas font.

Font Size

The default font size is 14pt. The image below illustrates the font size options within the Canvas Rich Text Editor.

Font Emphasis

Bold and Italic can be used to place emphasis on text when necessary.

  • Bold should not be used to create headers or emphasize large amounts of text.
  • Underlining should not be used unless required for proper reference styles as underlined text denotes a hyperlink.

True Text

True text simply refers to the composition of words and sentences using appropriate characters (text, punctuation, characters, symbols).

Occasionally, particularly in PDF documents, the “text” that appears on the page is actually a scanned image of text. This is problematic because images of text cannot be

  • read by screen readers and other assistive technologies
  • searched, so a student trying to find specific content within the document will not be able to do so via a text search.

True Text vs Images

True Text

The quick brown fox jumps over the lazy dog.

Note that you can select a specific word or multiple words in the sentence above.

Text as Image

text as image

Note that you cannot select words in the sentence above.

Resources

  • Semantic Structure This webpage outlines the appropriate use of headings and lists in designing document structure.
Categories
Canvas for Students

Conference Tool

Conferences allows you to broadcast real-time audio, video, share presentation slides, and share any other online resources.

Note: This video addresses the instructor, but applies similarly to Conferences created within Student Groups.

Conferences Tutorials