Lists

---

• Common mistakes
• How screen readers interpret VS. how you may interpret
• How to properly format lists
• When to use bullets
• When to use numbers
• Additional resources

• 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!)
• Sometimes copying content from a word processing program like a Microsoft Word or GoogleDoc into Canvas may visually create a list (but is not interpreted as a list in the HTML) - careful!
  
  Copying and pasting content into Canvas can sometimes create unnecessary <span> tags that disrupt screen reader interpretation. The easiest way to avoid unnecessary <span> and <div> tags when copying from external sources into a Canvas page is to paste your content into a simple text editor such as the built-in apps Notepad Links to an external site. (Window) or Notes Links to an external site. (Apple) to remove any hidden formatting. Then copy and paste from Notepad and Notes into your Canvas page. 

Watch this video to learn how formatting impacts your students. 

Watch this video to learn how to use Canvas' built-in list tool.

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. 

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 on your list. Instead, unselect the list style. Your cursor will snap back to the left margin, in regular paragraph mode.

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

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:

1. Select the numbered list icon from the editing bar.
2. Enter the first step in your sequence, then select Return.
3. Enter the next step in your sequence, then select Return.
4. Continue entering steps until the instructions are completed.
5. 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.

  How do I create a bulleted or numbered list using the Rich Content Editor? Links to an external site.

  Using Numbered Lists and Bulleted Lists in Online Content Links to an external site.