Structure navigable Canvas pages

When skimming a webpage or document, people using their vision might skim over the large, bold headings to determine which section to read. Similarly, screen reader users can bring up a list of just the headings to determine what they want to read and jump to that section. Properly marked headings are therefore crucial to accessible Canvas pages, benefitting both visual users and screen reader users.

Importantly, merely changing the visual aspects such as font size and appearance (bold, italic, underline) is not sufficient and not accessible because screen readers will not know that text is a heading without the proper code identifying it as such. In addition to providing important screen reader support, using headings creates a consistent look for Canvas pages.

Lists are another straightforward fix to improve Canvas page accessibility. The Rich Content Editor has built-in tools to easily create accessible lists.

Heading level 1 is reserved for the Canvas page title, and so the first level that can be applied within the content area is Heading 2. Headings should be nested in order without skipping levels, meaning that level 2s live inside level 1, and level 3s live inside level 2.

Rich Content Editor

1. Select all the text that should be a heading.
2. Select the appropriate heading level in the “blocks” drop down menu. This menu is located in the toolbar above the text editor area and is to the right of the font size drop down. Text is marked as “Paragraph” by default so the blocks drop down menu is likely showing Paragraph.

   

HTML Editor

1. Heading tags in HTML are of the form <h#>heading text</h#> where the # symbol is replaced with the heading level. So the tags for heading level 2 will be <h2> to open and </h2> to close.
2. Ensure heading text is enclosed in the proper heading tags.

Canvas has built-in tools for both ordered lists (labels which preserve order such as 1, 2, 3, etc) and unordered lists (bullet points) in its Rich Content Editor (RCE). Unlike Microsoft Word, typing a number, period, space, (or asterisk, space) will not autocorrect to a correct list format in Canvas, so users must ensure proper use of the list tools.

Formatting accessible lists on Canvas page in the Rich Content Editor (RCE):

1. Method 1: Start the list format before typing any list items.
   1. On the right-hand side of the toolbar above the RCE, select the three vertical dots button to open additional tools. Additional tools will open in another row right below the original toolbar.
   2. The list tool is the second button from the left on the new toolbar row. The dropdown menu on the list tool allows selection of the type of list and labels. Select the desired list type.
   3. A list item for the first entry will show up in the RCE. Type the list.
2. Method 2: Type the list without labels, then add the labels.
   1. Type all list items but do not include labels. Example:
      First list item.
      Second list item.
      Third list item.
   2. Select all list items, then follow steps 1-2 from method 1 above.

Accessible Lists Using HTML:

W3Schools.com has some great tutorials on creating lists in HTML.