D1 - Heading Styles

For Reviewers:

Checking Headings

PopeTech will alert to skipped headings or the absence of headings, but will not identify "faux" headings (paragraph text in large font). Use the Outline Structure to confirm all headings are tagged.

The WAVE tool will show the heading tag, and will alert if a heading level has been skipped. The thing to keep an eye out for are "faux" headings that look like proper headings but which don't have the <h> tag displayed in the WAVE report.

The built-in Canvas checker is not yet reliable for headings. We don't recommend using it to check page headings.

 

Headings communicate the organization of the content on the page. Properly styled headings give users of screen readers and other assistive technology the ability to scan a page for structure and content (just as sighted readers tend to do).

Heading Basics

Headings are nested by their rank/level, in reverse order. In Canvas, the page title has the rank 1 (<h1>), and page headings descend from main rank 2 (<h2>) to sub-rank 3 (<h3>) and finally to sub-rank 4 (<h4>). Headings with an equal or higher rank start a new section, headings with a lower rank start new sub-sections within the higher ranked section. (Think of how an outline is structured.)

Skipped heading ranks can be confusing and should be avoided where possible. For example, be sure that an <h2> is not followed directly by an <h4>.

Here's a visual example of heading styles in action.

Formatting Headings with Canvas' Rich Content Editor (RCE)

screenshot of heading styles dropdown

  1. Highlight the text of your heading.
  2. Click the text dropdown menu.
  3. Select the heading level.

Tips

  • Headings should indicate the start of a specific section of text; avoid "stand alone" headings (meaning there's no paragraph text directly below it)
  • Avoid choosing a heading "because I like that size font."
  • Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size or color), if desired.