D1 - Heading Styles

Headings communicate the organization of the content on the page. Properly styled headings give screen reader and other assistive technology users the ability to scan the page for structure and content.

Heading Basics

Nest headings by their rank/level. In Canvas, the page title has the rank 1 (<h1>), and page headings descend from the most important rank 2 (<h2>) to the least important rank 4 (<h4>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections within the higher ranked section.

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

Avoid picking a heading level based on, "I like that size font." =-)

Here's a visual example.

Formatting Headings with Canvas' Rich Content Editor (RCE)

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

Once a heading has been styled using the RCE, you can make format changes (bold, italics, font size or color), if desired.

PopeTech will alert to skipped headings or the absence of headings, but will not identify "faux" headings (paragraph text in large font). You can use the Heading Outline tool to confirm all headings have been included in the heading outline and are properly formatted.

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.