Make headings accessible

Understand the key considerations for making headings accessible.

For an overview of accessibility considerations for headings, see Heading off confusion: When do headings fail WCAG? — TPGi.

Meeting the Web Accessibility Standard

When a heading and its level are presented visually and programmatically with appropriate HTML markup, this meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A).

When headings describe the topic or purpose of the content that follows them, this meets WCAG 2 Success Criterion 2.4.6 Headings and Labels (Level AA).

Make headings descriptive

A heading should be clear and descriptive, giving a succinct, meaningful summary of the content that follows it. If the content’s topic or purpose is not described by the heading, rewrite the heading.

Use semantic markup

Always use appropriate semantic markup, ideally the <h1>–<h6> elements, to create headings.

Headings contain important information and they structure the content on the page.

Never:

make headings by simply styling the text without also applying the appropriate heading markup
use heading markup on text that is not a heading, just to make it look a certain way.

For more on the correct use of heading elements, see:

Do not skip heading levels

It’s best practice to always apply headings in a clear hierarchy without skipping levels. For example, make sure that an <h3> element is not followed by an <h5> without an intervening <h4>.

When heading levels are skipped, the heading hierarchy is no longer logical, and this can be confusing to people. This is especially the case for screen reader users who very often navigate by heading. WebAIM’s Screen Reader User Survey #9 Results note that the usefulness of proper heading structures is very high, with 85.7% of respondents finding heading levels very or somewhat useful.

For more, see What does hierarchical mean? — Accessible heading structure — The A11y Project.

Skipping heading levels is not a WCAG 2 failure

Keeping a logical heading hierarchy and not skipping levels is recommended by WCAG 2. However, skipping heading levels is not considered a failure of WCAG 2 as long as each heading is:

marked up as a heading
assigned a level consistent with its relative position in the heading hierarchy.

Example of when skipping heading levels is not a WCAG 2 failure

An <h3> section of content has a subsection.

If the subsection starts with an <h5> or <h6> heading, its lower position in the hierarchy is represented in the markup, and this meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A), even if a heading level is skipped.

Skipping rank like this could occur in scenarios such as when pulling in syndicated content from another website and the content contains a different heading level that cannot easily be changed. While not ideal, this does not fail WCAG 2 as long as the nested heading level is lower in the hierarchy than its parent section.

Exceptions for skipping heading levels

Fixed sections on pages: Heading levels for fixed sections of the page that repeat throughout the site, such as navigation menus or sidebars, should not follow the heading hierarchy of the main content. These should have a heading that indicates their relative importance compared to the main content, so possibly an <h2> or <h3>, and these should be used consistently across the site.
Navigation menu before main content: If the page’s main content starts with an <h1>, the site’s navigation menu or a sidebar that precedes the main content in the HTML source order can start with an <h2> because it’s relatively less important than the page’s main content.

For more information on using the <h1>–<h6> elements correctly, see:

Keep to a single `<h1>` per page

The <h1> element conventionally represents the page’s main topic or purpose, so having more than one <h1> on a page is potentially confusing.

Where possible, keep to using a single <h1> per page, and structuring the rest of the content and other page sections using the <h2>–<h6> elements.

Headings create the document’s outline

A document’s hierarchical structure or outline is based on the sequence of the <h1>–<h6> heading elements it contains.

A heading’s level is determined by the number (n) in the <hn> tag. For example, an <h3> is a 3^rd-level heading, and when it follows an <h2> or 2^nd-level heading, it begins a new subsection. This is how headings are and should be used today. For more on this approach, see:

Note: Historically, since the early days of HTML5, a heading’s level was said to be determined not by the number in its <h1>–<h6> tag, but by the nesting level of the sectioning content element (<section>, <article>, <nav>, and <aside>) in which it was found.

This section-based way of setting heading levels and creating an outline was never implemented across browsers and assistive technologies, and should not be used. It was formally withdrawn from the HTML Living Standard on 1 July 2022.

For more on this abandoned section-based approach to the document outline, see:

Headings as focus targets

Headings are often used as targets for keyboard focus — for example, when focus is set to:

the main content’s <h1> after activating a ‘Skip to main content’ link
a heading further down the page after activating a link in the page’s Table of Contents.

For more on using headings as the target of in-page links, such as skip links, see:

Setting focus to headings in SPAs or with dynamic content

When major sections of a web page change without a full-page refresh — whether in response to some user action or event, or a routing change in a single-page application (SPA) — having and setting focus to a heading at the top of the changed content is usually good for reorienting users.

For more, see Focus in single-page applications (SPAs) — Other keyboard focus considerations — Knowledge Area: Keyboard accessibility.