Content Formatting: Headers

Header Usage

Headers play an important role for accessibility, so please do not change header sizes unless you understand the structure and are mindful of these requirements.

H1: Use for page titles

Typically the first header on the page will be the page title. There is not usually a need to alter this in any way on pages that are already created.

Open

H2: Use for the first content section on the page

If your page uses headers to break up content, the section following the H1 will typically be an H2. In many cases it would be appropriate to only use H2s for each of the content sections on the page following the page title.

Here is an example of a page structure that would only need H2 headers:

H1 (Page title): All About Animals

H3 and H4: Use for supporting content

If your H2 has multiple sections that are related, you can break it down further with these headers. Here is an example of how to use these headers:

H1 (Page title): All About Animals

H5 and H6: Use sparingly

Header sizes 2-4 should be sufficient for most of your content. If you needed to break out further information, you may continue to nest content with these smaller header levels, but it’s likely that a bulleted list or other formatting might be more useful at this point.

H1 (Page title): All About Animals

Changing Header Sizes Using Components

To change a header size for a new section, you will typically use the selector built into the component itself, which is titled “Heading Level.” Please make sure not to confuse “Heading Level” with “Heading Size” and select the right level for the page structure.

Open

 

 

Changing Header Sizes in Paragraph Blocks

When formatting longer text blocks the headers are built into the paragraph text formatting options. In these cases there is no way to change the size of the header; you’ll need to use the size already set for the heading level.

H2, H3, and H4 are available by selecting a line of tet and then choosing one of the header sizes above. H5/H6 are available by clicking the dropdown arrow (but likely you will not need these).

Checking Your Work

Please check pages you are updating using an accessibility plugin to ensure they pass. Here are a couple of options:

WAVE Web Accessibility Evaluation Tools

Acquia Optimize extension - Chrome Web Store (Please contact the website team if you do not have a Monsido account)

Using Bold Text instead of Headers

Do not use a line of bold text where a section header should be used; this is an accessibility violation.

Correct:

Removing a Header Style

If you need to change something to regular paragraph text, click the dropdown arrow next to the H4 and select the paragraph symbol.

Header Sizes vs Header Rank/Tag

There may be cases where a header needs to be visually larger or smaller than the standard size for that header. For example, you may be creating a series of sub-sections that need to be an H2 because of where they are placed on the page, but visually you would like the text to be smaller. Most components allow you to change the size of text while retaining the correct meaning/structure of the headers.

In the example below, the header size selected is “Default for Heading Level”, which is an H2.

In this variation, the header size is an H3, but the header rank is still an H2, allowing for smaller text that still meets accessibility requirements.