Wait, where is Header 1?
Common mistakes
How screen readers interpret VS. how you may interpret
How to apply headers & general rules
Accessibility Checkers Limitation
Additional resources

What are headings for?

Take a quick look at the newspapers in the image below. At a quick glance, even with a small image, you can easily ascertain the title of the newspaper, the titles of articles, and the "lead" story. Newspapers are great examples of the ways formatting text can aid readers.

Front pages of newspapers demonstrating how headings help us read

Heading levels help segment material on the page, and help your students understand the hierarchy of topics and subtopics on your page. Chunking material prevents cognitive overload, providing information in digestible pieces for your students. Headers are an important organizational tool. They will help your students better understand the main points of each section, help provide a cognitive schema for the information you're presenting, and allow your students to skim the page.

From an accessibility perspective, headings are valuable as they provide individuals using screen readers with a simple method to navigate within a Content Page. In a recent study conducted by WebAim investigating the browsing habits of screen reader users, over 75% of individuals reported they use headings always or often to navigate web pages. Rather than navigating line-by-line through a document or Web page, the use of headings allows individuals to move through the information based on heading topic.

Notice how the text size changes depending on the heading level?

Header 2 is larger than Header 3.

Header 3 is larger than Header 4.

If you are consistent in your header level structure, students who are visual can quickly determine based on text size how the "main topics"(Header 2's) relate to their subtopics (Header 3's and Header 4's.)

Headings in Canvas Rich Content Editor

Inclusive learning environment benefiting all learners. The different heading style sizes help visual learners understand how the subtopics relate to the main topics, and with one another. From the perspective of a student who relies on a screen reader, the screen reader announces the heading level of each object, for example using the image above: "Heading Level 1, User-Friendly Content Pages Overview" and so on to identify the main topics and subtopics of a page.

Wait, where is Header 1?

Canvas has automatically defined that our page title is Header 1, which makes sense because your Canvas page title is the beginning of the main content. In this example, "User-Friendly Content Pages Overview" is our Heading 1.

Common mistakes & easy fixes

Trouble Spot #1: Logic

Mistakes in the phrasing of your headers can confuse all of your students, so carefully choosing the words in your headers is important.

Common Logic Mistakes

When our focus is on the content, headings can sometimes come as an afterthought. A common mistake is not paying attention to the logical structure of the headings or creating headings that aren't parallel to one another. For instance, the following list is not parallel:

cows
sheep
lettuce
bunnies
tomatoes

Easy Logic Fixes

Though they are all found on a farm, some of these things are not like the others! Choose headings that are descriptive and make sense to all your students. This takes time and thoughtfulness, but it's worth it! Consider this fix for the list above:

Common Livestock in California

cows
sheep
rabbits

Common Crops in California

lettuce
tomatoes
garlic
avocados

Trouble Spot #2: Formatting Headings

Another common mistake affects visually-impaired students far more than others. Well-meaning faculty often use the wrong tools within the Rich Content Editor to format their headers.

Common Heading Errors

Though using font size, bold, and underline to create a header may look nice, these formatting features don't have the HTML tags that screen reader devices need to identify the headers. Moreover, underlined text, as you'll soon discover, has a very specific meaning in web-based contexts - it denotes a hyperlink. Underlining your text may confuse sighted users, who will expect the text to then link them to another page.

Easy Heading Fixes

To properly tag your headings, use the heading levels from the drop-down paragraph styles menu. Highlight the heading, then choose the heading level from the drop-down list.

Headings in Canvas Rich Content Editor

Trouble Spot #3: Nesting or Semantic Structure

Headings not only provide students with useful overarching structure - the bones to the content - when done correctly, they also enable students to see subsections, allowing them to create a rich image of the relationship between sections and subsections.

Both sighted and visually impaired students will use headings to see the relationship between the chunks of information. Like an outline, the headings on your page should go in order.

Common Nesting Errors

Even when the headings tool is used, sometimes the heading structure - called semantic structure - does not follow in order. Heading levels that are out of order may confuse students who are using the heading structure to help them understand the relationship between concepts. For instance, in Canvas, Heading level 3 is smaller than Heading level 2 and uses a bold font. There is both a visual difference (for sighted students) and a coded difference (the tag changes from h3 to h2) for students using a screen reader.

Easy Nesting Fixes

Be sure your headings are in order.

The title of each Canvas Content Page is Heading Level 1, so the heading levels available for your use begin with level 2. Your headings, then, should start with level 2, with any subsections of level 2 starting with level 3, and so on. The structure of this page looks like this:

h1 Headings (Page title)

h2 What are Headings for?

h2 Common mistakes & easy fixes

h3 Trouble spot #1: Logic

h4 Common Logic Mistakes

h4 Easy Logic Fixes

h3 Trouble spot #2: Heading Level

h4 Common Heading Mistakes

h4 Common Heading Fixes

h3 Trouble spot #3: Nesting or Semantic Logic

h4 Common Nesting Mistakes

h4 Common Nesting Fixes

h2 How screen readers interpret VS. how you may interpret

h2 How to apply headers

h2 Additional resources

How screen readers interpret VS. how you may interpret

Watch this video to learn about heading interpretation and how formatting is essential to digital accessibility.

How to apply headers & general rules

Watch this video to learn how to applying headings in Canvas:

Note: tutorial begins at 0:38

Select the text you wish to modify [1], and click the Paragraph drop-down menu to change the heading level [2]. You can choose from Paragraph, Header 2, Header 3, or Header 4.

General Rules

There can only be one Header 1 per Canvas page (usually the page title); Canvas automatically defines the page title as Header 1
Multiple Header 2s, Header 3s, and Header 4s is acceptable
Avoid applying additional formatting on headers such as bold/underline/italics as these can disrupt students' screen reader preferences. Some screen readers are unable to apply custom existing bold/italics headings. Limit usage for each of these types of formatting.
Never skip a header level. Doing so will confuse students who rely on screen readers. For example, if you begin with:

h1 Headings

h2 What are headings for?

h4 Notice how the text size changes depending on the heading level?

Students who are visually impaired will first interpret a page by using their screen reader to begin reading aloud a Canvas page from the top to the bottom. In the example, header 3 is missing. Students will check their screen reader header list and settings in search of h3 in the sequence.

Manually formatting text does not automatically create screen reader-friendly headers. Manually changing the text size may help visual learners, but those relying on screen readers need special HTML tags that only applying built-in Canvas headers can accomplish
Avoid accidentally applying empty headers. This may sometimes happen when applying headers where there is extra space above a heading. The extra space will have a heading level, but no text, which can be confusing to a student who requires a screen reader. Here's an example:

h2

h2 The Life of Brian

Depending on the screen reader, it may, for example, read aloud in this case, "Header level 2 blank. Header level 2 The Life of Brian."

Accessibility Checkers Limitations

One of the most common heading errors is skipping heading levels (starting with Heading level 3, for instance, or moving from Heading level 2 to Heading level 4). The Check Accessibility tool will help you find and fix skipped heading levels.

Use the tool after you have formatted your page, but before you have saved. Select the Check Accessibility icon, and a pane will open as part of the editor. If you have skipped heading levels, they checker will flag the heading and suggest a fix. Before authorizing the fix, be sure the correct heading is being adjusted. For instance, if you were trying to nest three headings, like this:

h2 Main topic

h3 Subtopic

h4 Sub-sub topic

but accidentally identified the Subtopic as Heading Level 2, Canvas may accidentally flag the sub-subtopic as the problem.

Most importantly, Canvas cannot check the cognitive structure of your headings. It's up to you to make sure the headings are descriptive and make sense.

Additional resources

Read about it

What is the Rich Content Editor?

Watch it instead

The Rich Content Editor

How do I style text content in the Rich Content Editor?

How do I remove formatting copied from another source in the Rich Content Editor?