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. Watch this brief overview or read about lists in the tabs below the video.

Formatting Lists Basics

You can create a list from items you have already typed out, or you can add to the list as you go using the lists options in the Rich Content Editor. 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.

Click the bullet list icon in the rich content editor to make numbered or unnumbered lists

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.

Video Tutorial: Formatting Lists

Bullets or Numbers?

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!)

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.

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

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>

Creating Tutorials

If you are creating a multi-step tutorial with images, screenshots, or more complex elements within each step, numbered lists can present some layout issues. You can avoid this problem by using headings instead of a numbered list. Your page layout will look cleaner and enable you to add images.

The example below shows the use of headings to create a three-step sequence. This example uses Heading 4 because it is nested under a Heading 3 (the title in green above). You will want to selecting the Heading Style that follows the rules of heading hierarchy. The heading level of the steps should be Heading 2 if they are the only headings on the page, or should nest properly under that last used heading level.

Step 1

Select the Edit button in the upper right-hand corner of the page.

Step 2

Select HTML Editor. On your keyboard, hold down CTRL+F to open the browser search box, and type "sanity." Delete "sanity."

Step 3

Select save.