Structure navigable Canvas pages using headings

Introduction

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.

Instructions to format and identify headings in Canvas

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.