Criterion 9.1 – Appropriate use of headings

This post is also available in: Français (French)

The ARIA specification allows the use of the role heading combined with the aria-level property (hierarchical level in the document outline) to mark headings. Although it is preferable to use the native <hx> elements in HTML , the use of the WAI-ARIA role heading is compatible with accessibility.

While the HTML5 specification allows the use of only level 1 headings (<h1>), the lack of support by assistive technologies makes it necessary to use a relevant headings hierarchy.

Note

Ensure headings are in a logical order. For example, check that all headings are marked with h1 through h6 elements and that these are ordered hierarchically. For example, the heading level following an h1 element should be an h2 element, not an h3 element. Finally, don’t use heading mark up on text that isn’t actually a heading.

To ensure you are writing effective headings, read through the headings on the page and ask yourself if you get a general sense of the page’s contents based only on the information provided by the headings. If the answer is “no”, consider rewriting your headings. While you are at it, be sure that you are using the heading markup (h1 through h6’s) if and only if you are writing a heading. While applying such markup is a quick way to make text stand out, using it for anything other than headings will make navigating a web page more confusing for users of assistive technology.

Why is it Important ?

The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose is achieved using different sizes of text. Text size, however, is not helpful for users of screen readers, because a screen reader identifies a header only if it is properly marked-up. When heading elements are applied correctly, the page becomes much easier to navigate for screen reader users and sighted users alike.

In the same way that sighted users can glance at a page and get a sense of its contents, users of screen readers can do the same by navigating through headings. Well written and properly ordered headings can save users, especially those who use screen readers, a lot of time and frustration.

The purpose of headings is to describe the structure of the webpage, not just highlight important text. They should be brief, clear, unique, and marked with h1 through h6 elements applied in hierarchical order. All of these qualities make headings valuable tools for screen reader users. Similar to the way sighted users can glance at a page and get a sense of its contents, screen reader users can navigate through headings. Well written and properly ordered headings can save screen reader time and frustration.

In addition to making the page more accessible, headings have other benefits since search engines use headings when filtering, ordering, and displaying results. Improving the accessibility of your site can also have the effect of making your page more findable.

Best Practice : Start the Main Content with a h1 element

Usually, the best practice is to start the main content of a web page with a level 1 heading element (h1), with no other headings before this high-level heading. Markup the sub-sections of the page as level 2 heading elements (h2). If there are sub-sections within the level 2 sections, mark these sections as level 3 heading elements (h3) and so on. Anything that comes before the main content of the page should not be marked up with any headings at all, though this is not an iron-clad rule. One of the main reasons that the h1 element should appear at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first h1 element, which, in principle, should allow them to jump directly to the main content of the web page. If there is no h1 element, or if the h1 element appears somewhere other than at the start of the main content, screen reader users will have to listen to additional web page content to understand the page structure, wasting valuable time.

As with all best practice recommendations, there will be exceptions in which it doesn’t make sense to start the content with <h1>, or when it may be best to put other headings before the content, but the exceptions do not apply to the vast majority of web pages.