Headings

Introduction

When a user encounters a webpage, they want to confirm that the page includes relevant information and find that information quickly. Headings create an outline for the page, similar to a term paper outline or table of contents.

While sighted users typically determine a page's content and structure by scanning for large text that look likes headings, screen reader users rely on the page's underlying semantic structure for navigation. Users with motor or other disabilities might also navigate or explore a page by headings. Headings are also used by search engines to determine page content.

Page heading must be descriptive and properly structured. Each heading should describe the section of content it precedes. The order of heading levels should be logical. There are six heading levels available—from first-level (<h1>) to sixth-level (<h6>). A page should typically have only one first-level heading that describes the page's overall content (and should be similar to the page <title>). This <h1> is typically located at the beginning of the main content (optimally a <main> element). After the first-level heading, a page may have a mix of second-level headings (<h2>) through sixth-level headings (<h6>), according to the section structure of the page.

Consider the following heading structure from a "Favorite Recipes" web page:

It is acceptable to have lower-level headings, such as <h2>, precede the <h1>. For example, a page may have <h2>s in the header of the page or in a sidebar that precedes the main content.

Below are some common ways that headings can be implemented incorrectly, resulting in a heading structure that makes it difficult for screen reader users and others to navigate a web page. WAVE icons are shown in the examples to demonstrate how this testing tool can aid in evaluation of heading structures.

Missing First-level Heading

When a page is missing a first-level heading (<h1>), screen reader users have to rely on other context clues to determine the content of the page. Make sure that every page has a descriptive (but succinct!) first-level heading to help users quickly determine what content the page contains and where the main content of the page begins.

Empty Headings

Empty heading elements, either placed into the page mistakenly or used to adjust page layout, are still announced to screen readers as headings. Empty headings are presented in NVDA's and JAWS's Headings Quick Key and elements lists and in the VoiceOver rotor's Headings list. In Figure 2 below, a recipe is followed by an empty heading. However, since the element does not contain text, a screen reader user may be confused by the announcement of a heading element with no text. Avoid placing empty headings in web pages and remove any that are present. If additional vertical space is needed, apply CSS margin or padding.

Non-HTML Headings (Visual Only Headings)

When text is styled to visually convey a heading, usually by making it bigger and bolder than the page's body text, it must be marked up as a heading using HTML. This ensures that screen reader users receive the same semantic information that visual users do: this text describes the content that follows it. Be sure to match heading level (<h1> through <h6>) to the content structure. CSS can be used to style the headings as desired.

Text Incorrectly Marked Up as a Heading

In some cases, text that does not describe a section of content may be marked up as a heading using HTML. Sometimes this is done to apply styles to an element or make the text larger or stand out. This may be confusing because screen readers announce the element as a heading even though the heading text does not describe the content that follows.

To avoid incorrectly marking up elements as headings, be sure to only apply heading tags (<h1> through <h6>) to text that describes content that follows it. You can apply unique CSS styles to elements that are not headings but need to stand out on the page.

In this example, it's important to note that WAVE does not flag this as an error or even an alert. WAVE does indicate that a heading is present, and shows the heading level. It's up to the human reviewer to apply their judgment in the context of the surrounding page.

Illogical Heading Order

Many web pages have illogical heading structures, which place headings of a lower level before headings of a higher level, provide no hierarchy, or skip heading levels throughout the page.

The same would be true for implementing heading levels all at the same level, making it difficult for screen readers users to know which heading describes the content overall and which headings describe sections of content.

Overall, when implementing headings, it is important to remember that HTML heading elements create the outline for a page. When creating a heading structure for a web page, avoid skipping heading levels or applying illogical heading levels.