Accessible heading guidelines

  1. Use "real" headings.
  2. Use headings to organize and make content scannable.
  3. Don't skip heading levels.
  4. Headings in Canvas

Headings are about logical structure, not visual effects. Consider these two lists. In the first, the six items appear to be cities. In the second, the six items appear to be two states with two cities under them. Headings help organize content into groups of related ideas—and reveal relationships between those groups.

New York
Albany
Rochester
Washington
Seattle
Spokane

New York

Albany
Rochester

Washington

Seattle
Spokane

 

Use "real" headings

HTML headings convey meaning, but only if the text is properly marked up:

  • Don't just make a heading bold and larger (it may look like a heading, but it has no meaning). Use the heading styles in your rich-text editor, or mark them up with proper HTML.
  • Don't use headings based solely on their visual appearance or size (instead, use the correct heading level and alter the look of headings with rich-text-editor options or in the CSS).

Why? Screen readers can generate browsable lists of headings with a single keystroke, providing users who are blind with a mental picture of the page and helping them find content quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents.

Organize and make content scannable

For sighted users, headings are also important. Large blocks of text without headings appear dense and daunting, particularly online. Many users simply skip over them. Headings organize content and make text much more approachable.

Text without headings is dense and unstructured

Page with headings is more structured

Don't skip heading levels

There are six levels of headings in HTML: H1-H6. Every page should have one (and only one) H1—the title. The remaining headings (H2-H6) are used to organize content and should be hierarchical—that is, H2 headings are the second most important heading, while H3 headings are subsets of H2 headings, etc.

An example of properly nested headings:

<h1>Title of the Page</h1>
    <h2>Section</h2>
        <h3>Subsection</h3>
        <h3>Subsection</h3>
    <h2>Section</h2>
        <h3>Subsection</h3>

Headings in Canvas

To create a heading in Canvas, don't just make the text bold and larger. Instead, highlight the text you want to make a heading, and select the appropriate heading level from the Paragraph dropdown in the rich content editor.
Heading styles in the Canvas rich content editor

This adds underlying markup that makes headings available to screen readers and other assistive technologies. 

Relevant W3C WAI documents

 

Was this helpful?

 
 

Slack

Accessibility Connections