Heading hierarchy

Meaning

This refers to the relationship between the headings used on a page.

Organizing them hierarchically, with h1 at the top and h6 at the bottom, is considered best practice by the Web Accessibility Initiative.

Background

Headings are a type of HTML element used to organize the content on a page. They can be used as visual cues to users and provide information to assistive devices such as screen readers that can help the users of these devices navigate the content of a page.

Surveys of screen reader users have shown that most use headings to find information on a page with a lot of content. And the more experienced a screen reader user is, the more likely they will use headings to navigate.

There are six HTML heading elements: h1, h2, h3, h4, h5, h6. When using these elements to organize content, h1 should be used at the top of the hierarchy, followed by h2, h3, and so forth.

The A11y project emphasizes that heading tags shouldn't be used to style content visually, and heading levels shouldn't be skipped.

WCAG Level AA requires the semantic use of headings that follow a consistent usage pattern, while Level AAA requires an organized heading structure.

The appropriate use of headings is also a crucial consideration in authoring accessible PDF documents.

Alternatives

Heading hierarchy refers to HTML heading tags and their numerical values H1, H2, H3, H4, H5 and H6.

Comments