Here we go! We are starting with an overview of two very common elements of page design, in both documents and Canvas pages.

D1: Headings
D2: Lists
Resources

D1: Heading Styles

ALIGNED: Heading styles are consistently and correctly used to aid navigation/comprehension through the course content. Fonts, colors, and formats (bold, italics, etc.) are not used in lieu of heading styles.

Headings communicate the organization of the content on the page. Properly styled headings give users of screen readers and other assistive technology the ability to scan a page for structure and content (just as sighted readers tend to do).

Heading Basics

Headings are words or short phrases that serve as titles for the content below them. They nested by their level. In Canvas, the page title is always level 1 (<h1>), and page headings descend from there:

The main sections on the page use Heading 2 (<h2>).
If a main section has sub-sections, Heading 3 (<h3>) is used for the headings of these sub-sections.
If a page has sub-sections with sub-sections, that's a good sign that the page is getting long and should be broken into several pages. Technically there is a Heading 4 (<h4>), but its use is not common.

Think of heading structure as an outline of your content, with Heading 2 being the most common heading choice and other headings only used to indicate subsections within the main sections. To see an example of headings, look at the headings on the page you are reading right now. The title of each tabbed section uses Heading 2, and subsections within these tabs use Heading 3. When you read the headings, you get an overview of the page's content. Just like in an outline, you can see levels: main points (using Heading 2) and supporting points (using Heading 3).

This 3-minute video (part of Foothill College's 10-Day Accessibility Challenge) walks through heading structure, how to create headings, and how to avoid common mistakes. To get the most out of this video, notice how the heading structure mimics an outline.

A few reminders:

Headings should indicate the start of a specific section of text; avoid standalone headings (meaning there's no paragraph text directly below it), back-to-back headings with no text in between, and headings that repeat the page title.
Formatting plain text may look like a heading, but it's not. Once a heading level has been selected using the RCE, you can make changes to how it looks.
Skipped heading levels can be confusing. Make sure, for example, that an <h2> is not followed directly by an <h4>, with no <h3> to be found.

heading style selected from RCE dropdown menu

Formatting Headings with the Rich Content Editor (RCE)

When editing a page (or assignment, discussion, etc.), follow these steps to create headings:

Highlight the text of your heading.
Click the text dropdown menu.
Select the heading level.

Once a heading has been formatted using the RCE, you can make stylistic changes (bold, font size or color), if desired.

D2: Lists

ALIGNED: Lists are created using the bullet or numbered list tool instead of being formatted manually so that lists are recognized when using a screen reader.

Lists provide an easily understood, structured order to content. They are especially helpful for online reading, so lists are likely to be a common feature of your online course. Let's go over what you need to know to make sure your lists are accessible.

List Basics

unordered and ordered list icons on Rich Content Editor

The list tool in Canvas offers two types of lists: unordered and ordered. Within each type, there are three choices. Which type should you use?

Unordered List (Bullets): An unordered list is used for items that are NOT in a sequence. Each item is seen as part of a group, and the order is not significant.
Ordered List (Numbers/Letters): An ordered list presents items that need to be in a particular order, such as steps in a set of instructions. Using an ordered list tells readers that each item must be addressed in the order presented.

Lists should be created using the Rich Content Editor (RCE) rather than manually (typing numbers or hyphens) so the list is properly tagged in the HTML code and a screen reader device can interpret it as an actual list.

If you'd like to dig a bit deeper, here are two videos from Foothill College's 10-Day Accessibility Challenge:

Formatting Lists with the Rich Content Editor (RCE)

When editing a page (or assignment, discussion, etc.), follow these steps to create headings:

Type the list items as separate lines of text.
Highlight the list content.
Click the bulleted (unordered) or numbered (ordered) list tool in the RCE.

Resources

Foothill College's 10-Day Accessibility Challenge actually has THREE videos about headings! To watch the whole series, check out Headings (Overview) and Headings vs. Text Formatting.

CVC's Course Design Resources for D1-D2:

🛑 Before you click "Next," please work through all the tabbed sections on this page.