Headings Summary

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

Screen reader and assistive technology (AT) users browse "sections" of a website or Learning Management System (LMS) using headings and sub-headings (h1, h2, h3, h4, etc.). Proper use of headings creates semantic structure and provides an essential organization for navigation. Without headings, pages are presented as one long paragraph to these users. Additionally, constructing content using headings allows all learners to more readily locate, identify, and understand logical units of information.

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.

Headings Tutorial with transcript

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 order of headings and do not skip heading levels (e.g., don't go from an h2 to an h4), as screen reader users will wonder if content is missing.
Use headings to divide blocks of text into manageable sections. By breaking up page content into smaller chunks, the material becomes more easily interpretable.
Do not pick a heading style based on aesthetics or because you like the font color, size, etc.
Use headings to communicate structure and semantics.
Each heading 1 and heading 2 name should be unique.
The highest customizable level in bCourses (Canvas) is H2. This is because bCourses automatically assigns an H1.

Example of Hierarchy:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 3

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 4

Heading Level 2

Headings in bCourses (Canvas)

To set 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

Use the Reading Check link below to view questions related to this workshop.

Reading Check

Resources

Screenreader demonstration: Using Headings
Tota11y Bookmarklet
- Tota11y Bookmarklet tutorial
WCAG 2.0 AA Guideline 2.4.6
WCAG 2.0 AA Guideline 1.3.1
WebAIM
UC Berkeley Web Access