Heading Structure

What is a heading?

A heading is an HTML element used to label the beginning of a section of content, like the title of this page! Using headings allows assistive technology users to quickly navigate to each section and know its relationship with other content on the page. Headings range from <h1> (the highest) to <h6> (the lowest).

Implementing Accessible Headings


In general, you should use a heading whenever you start a new section (or subsection) of content. Take the following example. 

 Text: Heading 1 Cal Poly Pomona, Heading 2 Campus, Heading 3 Dining Locations, Heading 3 Housing, Heading 2 Students, Heading 2 Faculty.

Would it make sense to include the “Students” heading as a heading level 3 under “Campus”? Probably not. If you come across information on your website that seems like either a new topic or a specific part of the current topic, it is best to create a new heading to organize the page. 

DO use descriptive heading text. While some heading text may make sense in the context of your page, users of assistive technology often navigate using just the headings outside of context. Having non-descriptive heading text (or sentence fragments such as “Here you can”) makes the page less accessible for everyone. 
 
DON’T skip heading levels. While it may be tempting to skip heading levels because a topic seems much less important than its parent section, this can cause confusion for screen reader users who may think that they have missed a section. In the example below, heading level 3 is skipped between “Campus” and “Dining Locations”. This creates an illogical structure that may lead to difficulty in navigating the page.
Text: Heading 1 Cal Poly Pomona, Heading 2 Campus, Heading 4 Dining Locations, Heading 4 Housing, Heading 2 Students, Heading 2 Faculty.
Is it ever okay to skip heading levels? Only if there is content that is repeated on multiple pages. There, continuity is more important than heading organization. 

An H1 heading can be applied within the content under the "Page Heading (H1)" but can easily be missed, ensure that there's always an H1 on every page. In addition to that, H2's and subsequent H3's are already integrated within the other content types such as cards and others but continue to be vigilant in ensuring there are correct headings in your content.

Text/Image Content Option

In the Text/Image Content Option, you will have access to the text editor and make adjustments in Heading levels. The heading level 2 can be set in the text field above the text editor. Since the text editor is within the heading level 2 section, any sections created inside should start at heading level 3.

You can get a better view of the sections in your text editor by enabling View > Show Blocks.

Show Blocks menu in Cascade text editor

Change your text to the appropriate heading level or format as paragraph text.