[ARCHIVED] Making Lists Accessible in Canvas

snugent
Community Champion
‎12-13-2017 03:03 PM
1
11789

When you create content for your course it is important to make sure you are structuring content in accessible way. The list feature in the rich content editor in Canvas has options for creating unordered and ordered lists. The unordered list is for organizing lists of similar content where as the ordered list option is for organizing tasks that should be completed in specific order. 

Example an Unordered (Bullet) List

In this example I created a list of dog breeds. In the rich content editor select the items you wish to create a list and then in the toolbar select unordered list item option. 

262548_rich-content-editor-bullet-option.jpg

  • Akita
  • Doberman Pinscher
  • Boxer
  • Great Dane

Example of an Unordered List with Indenting List Items

Lists can also be nested using the indent option in the rich content editor toolbar. Select the list items you wish to indent and select the indent option in the toolbar. The bullet style will be different for the indented items. 

262547_rich-content-editor-indent-option.jpg

  • Working Dogs
    • Akita
    • Doberman Pinscher
    • Boxer
    • Great Dane
  • Toy Dogs
    • Miniature Poodle
    • Yorkshire Terrier
    • Miniature Schnauzer 

Example an Ordered (Numbered) List

In this example I created a list of instructions for assignment. In the rich content editor select the items you wish to create a list and then in the toolbar select the ordered list item option. 

262549_rich-content-editor-numbered-option.jpg

  1. Read the following article from the Illinois Online Network website: What Makes a Successful Online Student.
  2. Create a message and answer the following questions: What are your role priorities (student, parent, child, worker, friend, etc)? and How will being an online student fit with your other responsibilities?
  3. Now that you have completed this course what advice would you give to students who are new to taking courses online? 

Example of an Ordered List with Indenting List Items

In this example we are going to create a ordered list with nested items. In this list we are going to display the questions on separate lines and nest them under number 2. Place the cursor before the first question and hit the enter key to create a new line in the list. Repeat this process for the second question. Select the list items you wish to indent and select the indent option in the toolbar. The nested items will also have numbering; however, you can change by switching to the HTML View and changing the code just a bit. 

  1. Read the following article from the Illinois Online Network website: What Makes a Successful Online Student.
  2. Create a message and answer the following questions: 
    1. What are your role priorities (student, parent, child, worker, friend, etc)? 
    2. How will being an online student fit with your other responsibilities?
  3. Now that you have completed this course what advice would you give to students who are new to taking courses online? 

How to Change the Nested List Numbering

In the rich content editor switch to HTML View. In the code find the nested list. In the example below it is line 4. Place the cursor inside the LI element tag and hit the space bar. Then type the following text to create the attribute for ordered list item (type="a").  There are other attributes you can apply. See this reference guide from HTML Dog. 

<ol>
<li>Read the following article from the Illinois Online Network website: <strong><a href="http://www.ion.uillinois.edu/resources/tutorials/pedagogy/StudentProfile.asp">What Makes a Successful Online Student</a>.</strong></li>
<li>Create a message and answer the following questions:
<ol type="a">
<li>What are your role priorities (student, parent, child, worker, friend, etc)?</li>
<li>How will being an online student fit with your other responsibilities?</li>
</ol>
</li>
<li>Now that you have completed this course what advice would you give to students who are new to taking courses online? </li>
</ol>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

(Bonus) Other List Options

There is another list option called the definition list option. This list option is useful for glossary terms. It is important to note this list option is not available as an option from rich content editor toolbar and you will need to edit the HTML code on the page. Below is example of how to write the code. Refer to the resource list below for more details on how to write a definition list. 

<dl>
<dt>3D</dt>
<dd>three-dimensional; used commonly in computer animation, virtual reality, etc.</dd>
<dt>404</dt>
<dd>Not Found error message; a HTTP standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested</dd>
</dl>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Additional Resources

1 Comment