Creating Accessible Lists in Canvas

Purpose of Lists

Lists are terrific ways to present related ideas to students, to illustrate items in a group, present pieces of a series, or to outline steps in a process. They also capitalize on white space, which can help make your page more visually appealing.

Common Mistakes

Errors occur when instructors create lists without using the list style, or when bulleted lists are used when a numbered list is called for (or vice versa!)

List Creation Guide

How to create lists

You can create a list from items you have already typed out, or you can add to the list as you go. All items on the list need to be on separate lines (use the Return key to advance to the next line). Highlight the text that is part of your list, then select either the bulleted or the numbered list style.

Screenshot of Rich Content Editor toolbar with the bullet list and numbered list buttons highlighted

If you would like to add to your list, you can insert your cursor at the end of any items in the list, then enter Return to insert a new line in the list. To finish your list, after the last element in your list, enter return. A new bullet or number will appear at the end of your list--don't leave this "blank" item in your list. Instead, unselect the list style. Your cursor will snap back to the left margin, in regular paragraph mode.

When to use bullets

If your items are a group of equivalent ideas or terms, and the order is not an essential aspect of the concept, use a bulleted list. Consider, for instance, the list of things every instructor can easily do to make sure content pages are accessible to everyone:

Chunk material into useable bits.
Use white space to prevent cognitive overload.
Use styles to tag headings for users with screen readers.
Use bulleted and numbered list to synthesize information.
Integrate meaningful hyperlinks into your text.
Ensure color contrast is optimized for the visually impaired.

When a screen reader encounters a properly formatted list, this is what it sees:

<ul>
<li>chunk material into useable bits</li>
<li>use white space to prevent cognitive overload</li>
<li>use styles to tag headings for users with screen readers</li>
<li>use bulleted and numbered list to synthesize information</li>
<li>integrate meaningful hyperlinks into your text</li>
<li>ensure color contrast is optimized for the visually impaired</li>
</ul>

Both the beginning and end of the list are marked (ul and /ul). The screen notes the beginning and end of the list for the user. You can check your formatting for lists by toggling to the HTML Editor.

When to use numbers

If your items are a sequence, steps to instructions, or an essential part of a whole (such as, there are four things you need to know to complete this assignment), use a numbered list. For instance, consider these sequenced instructions for creating a list:

Select the numbered list icon from the editing bar.
Enter the first step in your sequence, then select Return.
Enter the next step in your sequence, then select Return.
Continue entering steps until the instructions are completed.
De-select the numbered list icon in the editing bar--your cursor will snap back to the left margin, ending your numbered list.

When a screen reader encounters a properly formatted numbered list, this is what it sees:

<ol>
<li>select the numbered list icon from the editing bar</li>
<li>enter the first step in your sequence, then select Return</li>
<li>enter the next step in your sequence, select Return</li>
<li>continue entering steps until the instructions are completed</li>
<li>de-select the numbered list icon in the editing bar--your cursor will snap back to the left margin, ending your numbered list</li>
</ol>

Again, the screenreader notes the beginning and end of the list, helping the user keep track of where they are.

You may also want to use a numbered list in your unit overview that makes sure that students have a task list of content and assessments in the appropriate sequential order. See the example below.

Read the unit overview
Read Chapter 7 in our text
View the Ted Talk about creative thinking
Participate in the Creative Thinking Discussion forum
View the video lecture
Write and submit an essay about how creative thought is important to decision making.

Again, the screenreader notes the beginning and end of the list, helping the user keep track of where they are.

Important: Before you continue, please read all the list information above.

Additional Resources

Click on the Next button below to continue on in this module.