Heading structure for accessibility

Date of publication

This blog article takes a look at headings in HTML. Why should they be correctly labelled, how do they do it and what impact do they have on assistive technology users?

Structure

Blind people use the headings of a document as a kind of table of contents. As can be seen in the screencast at the end of the article, a list of headings and their corresponding heading level can be displayed. If used correctly, the structure of the content can already be recognised.

Headings in articles

There are heading levels numbered from one to six, with the number indicating the hierarchical level. Heading level one, for example, should be used to indicate the main content. The main heading of the article serves as an example on this page. The next heading level should be one of the second level. Here, a logical structure is essential to convey relationships between contents. Which level the next heading should have is determined by the content. If the content introduced by the level two heading is further subdivided, a level three heading should be used. If, however, it is a new item that is not to be seen as a sub-item in terms of content, then the level two heading should be used again.

Image
Screenshot: Header in JAWS

Screenshot: List of headings in JAWS

Headings outside articles

Outside of articles, there are no such clear rules. By "outside articles" is meant anything that cannot be attributed to the main content. For example, a newsletter subscription, a list of recent articles, etc.

In practice, the level two heading is often used for these page areas. A more interesting approach I read while researching for this article is that the level six heading should be used for this. The rationale for this is that this level of heading is unlikely to be found in articles as a rule, or at least very rarely. So there would be a clear demarcation between the content level and the structural level.

What now where?

Let's assume that heading levels one through four are generally used for the content outline. And level six headings are used for structural elements on the page, then it is clear to screen reader users that and how they can jump directly to the main content of the page. But also how to get to structural elements.

How important is this?

In the most recent version of WebAIM's Screen Reader User Survey, at the time of publication of this article, 86.1% of participants said that a good heading structure was important to them. 68.8% stated that they find information by means of the heading structure.

These figures clearly show the importance of a coherent heading structure, and that it is an absolute must-have.

Special case of headlines

A special case in journalism is the headline before the actual headline, also called rubrum. It is not actually part of the headline, but often provides the necessary context.

From the user's point of view, it seems that there is no uniform way of dealing with this issue that could be agreed upon. Thus, it is not initially clear which headlines are related to which text.

Theoretically, it would be possible to combine all information in one heading and simply make it look different. With this option, one receives all the information, but the synchronicity of the structure of the page is lost in comparison with sighted users. In addition, users are deprived of the choice of whether the rubric in which an article was published is important.

The best possible distinction of the rubric is to use a heading level for it. For example, in the article overview, the article headings should be marked as level three headings and the rubric as level four heading. In this way, it is up to the users to decide whether and at what point in time this information is perceived. Likewise, a quick look-up is possible, if it is to be found out fast, which rubric an article is about.

In summary

  • Heading levels should always be applied semantically correctly. The logic is determined by the content. If this does not bring the desired visual result, this can be adjusted by web design.
  • For users of assistive technologies, a logical heading structure provides a kind of table of contents that ensures quick orientation and the ability to find information.
  • The heading of level one is to be used only once and marks the heading of the content.
  • Level one headings should not be skipped. A level one heading cannot logically be followed by a level four heading.
  • A heading that does not belong to the content should be clearly separated from it. For example, this may be a heading level that will almost never be found in body text because it is not structured to include heading level six.

The practice

In the following screencast you can see the effect of a heading structure.

Screencast: Heading structure with screen reader

Profile picture for user DeepL

DeepL is a deep learning company that develops AI systems for languages. The company, based in Cologne, Germany, was founded in 2009 as Linguee, and introduced the first internet search engine for translations. Linguee has answered over 10 billion queries from more than 1 billion users.

Profile picture for user dennis.westphal

Dennis Westphal

Dennis is an IT consultant at the Company for the Development of Things. His field is accessibility. Helpfully, Dennis has been blind since birth. He creates his screencasts with open source software.