Module Alt Text Module Captions Module Color Module Headings Module iFrames Module Inline Styling Module Links Module Lists Module Multimedia Module Tables

Headings Summary

Listen to this page's content by selecting the play button below.

Screen reader and assistive technology (AT) users browse “sections” of a website or LMS using headings and sub-headings (h1, h2, h3, h4, etc.). Proper use of headings creates semantic structure and provides essential navigation. Without headings, pages appear as one long paragraph to these users. Using headings helps all learners locate, identify, and understand logical information units more readily.

Overview

Populate content with proper heading levels to create semantic structure. Play the following video tutorial to learn more about how to add headings in bCourses.

Video Panel

Download Transcript for bcourses Headings Tutorial

Transcript for bcourses Headings Tutorial

[Music Playing]

Screen reader and assistive technology users browse "sections" of a bCourses page using headings and sub-headings. Proper use of headings creates semantic structure and provides an organized layout for navigation. Without headings, pages are presented as one long paragraph to screen reader users. Additionally, constructing content using headings allows all learners to more readily locate, identify, and understand logical units of information.

To begin, open your bCouses site and select “Pages” from the Course Navigation Menu, then select “view all pages.” If you already have an existing Page you’d like to add headings to, select that Page. But if you’d like to create an entirely new Page with headings, select the blue “Add Page” icon in the top right corner. Enter a Page title in the small text box at the top, then, in the larger text box below, type or paste the Page’s contents. To add heading structure to the Page contents, highlight the text intended to be used as a heading, then select the desired heading level from the paragraph drop down. bCourses automatically designates the title of the Page as Heading Level 1, so all sub-headings must be assigned Heading Level 2, 3, or 4. Use these heading tags to structure the Page’s main topics and subtopics.

It’s important to adhere to the correct order of headings and not skip heading levels, as screen reader users will wonder if content is missing. And remember, heading level choices are not based on aesthetics; heading levels are meant to provide semantic structure and make the material more easily interpretable. It’s also essential that the names of headings are unique from the Page’s Title. When you have finished assigning headings to your bCourses page, simply select the “save and publish” button. The page will now appear in the “Pages” section of your bCourses site; screen reader and assistive technology users will be able to navigate the page using the heading structure you’ve created.

[Music Playing]

Best Practices

Use heading tags to structure all pages and documents based on main topics and subtopics, e.g., "Module 1," "Readings," "Required,” etc.
Adhere to the correct heading order and do not skip heading levels (e.g., don't go from an h2 to an h4), as screen reader users may wonder if content is missing.
Use headings to divide blocks of text into manageable sections. The material becomes easier to interpret by breaking up page content into smaller chunks.
Do not pick a heading style based on aesthetics or because you like the font color, size, etc.
Do not use ALL CAPS. This comes across as yelling and is more challenging to read.
Use headings to communicate structure and semantics.
The names of headings 1 and 2 should be unique.
The highest customizable level in bCourses (Canvas) is H2. bCourses automatically assigns an H1.

Example of Hierarchy:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 2

Headings in bCourses (Canvas)

To set the heading level:

Open the Rich Content Editor and highlight the target text.
Select the Paragraph drop-down menu and choose the desired heading level.

Reading Check

You can use the Reading Check link below to view questions related to this workshop.

Reading Check

Overview

Video Panel

Transcript for bcourses Headings Tutorial

Best Practices

Example of Hierarchy:

Headings in bCourses (Canvas)

Reading Check

Resources