Headings
- 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.
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 Links to an external site. 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.)
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.
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.
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.
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
Watch this video to learn about heading interpretation and how formatting is essential to digital accessibility.
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."
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 Links to an external site.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.
Read about it
What is the Rich Content Editor? Links to an external site.
Watch it instead
The Rich Content Editor Links to an external site.
How do I style text content in the Rich Content Editor? Links to an external site.