Headings and accessibility. Aspects to consider.

Headings are one of the basic aspects to consider when making a website accessible. On many occasions, because of being such a basic aspect, less effort than necessary is spent thinking about them and implementing a good heading structure to the web.

In this article, we consider them from an accessibility point of view. 

WCAG criteria covering heading management

First, we must consider the sources of information that we have when considering whether our website is accessible or not in terms of the use of headings. In this sense, we will always have to consider WAI’s (Web Accessibility Initiative) WCAG (Web Content Accessibility Guidelines). In this standard, which is taken as a reference in terms of web accessibility by current regulations, several criteria refer to the use of headings:

• 1.3.1 Info and relationships (level A): This criterion refers to the fact that the same information that is transmitted visually on the web must be transmitted to assistive technologies such as screen readers. In the case of the headings, we must implement them with the HTML h1-h6 tags or use the ARIA role=”heading” along with an aria-level attribute that indicates its level. Also, we must verify that no level is skipped (you cannot skip h2 between h1 and h3).
• 2.4.6 Headings and labels (level AA): It is the criterion that specifically covers headings. This criterion makes sure that our headings are descriptive and that they fit into a logical structure of the information. To do this, we must make sure that if we were to consider them without their content, they would make sense. For example, in the case of this article, we do not use headings such as "Introduction", "Explanation" or "Conclusions". With a title list, we can get an idea of the organization of the information in the article.
• 2.4.1 Bypass blocks (level A): There is a tendency to forget this criterion when discussing headings. It tells us that we must provide a mechanism for users to avoid blocks with repetitive information on each page, such as the menu. Offering headings at the beginning of each section, when these are organized correctly, is a sufficient technique to pass this criterion. However, we strongly recommend adding an alternative mechanism such as a “Skip to Main Content” link.
• 2.4.10: Section headings (AAA level): The page should be organized with headings and each section of the content should have one. It is included at the AAA level because not all content can meet it. For example, if we include an existing document on a website that does not have headings of any kind.

Best practices for an accessible heading structure

It is important to remember that accessibility is not a matter of “checking” a box once we meet the criteria. Accessibility is a constant effort to put the user and their diverse circumstances and needs at the center of the development process. In addition, accessibility always adds value and helps us in other aspects such as usability or even web positioning. As examples of good practices, we can consider:

• The visual organization of the information through the headings is equivalent to the non-visual organization. Regardless of whether we meet the criteria, we can reflect on whether the structure of h1-h6 headings is similar to that which is visually transmitted through different sizes and decorations of the fonts.
• The fact that headings must have a logical structure and be descriptive can also help us in the SEO positioning of the website.
• Although it is allowed and even contemplated in the WAI examples, it is not recommended that when starting the heading structure a lower-level heading precedes a higher-level one in the DOM. That is, the first one of the page is an h2 instead of an h1. When implementing this kind of solution, we must consider whether it is really necessary to do so and what implications it will have for users.

Common problem: accessibility and headings

The situation mentioned in the last point of the good practices, having a lower-level heading that precedes a higher-level one in the DOM, is something that we encounter quite often.

As time passes since the creation of the World Wide Web, web applications have become more complex. We no longer have many websites that function as basic “documents” with a title and a few subtitles to organize the information. We find all kinds of applications and structures. In this sense, in many projects, this question arises:

Should the title of the page be the title of my website (usually the logo) or the title of the content?

It is a common question that we find in many projects. If we answer it strictly from the point of view of the content’s organization and accessibility, the answer is that the title of the website must be an h1. From the perspective of the logic of information organization, all the content on the page "depends" on the title of the website. For example, if the title of the website is "A different blog" and the title of the content is "My first article", the most logical approach is that all the content of the page belongs to "A different blog" which would be the h1. If, for example, in the footer, there is a heading (“Interesting links”), it will belong to the title of the web. Otherwise, it would seem that the "Interesting links" belong to "My first article" (which would be the h1) and we would also have "A different blog" as an h2 that is before the main title of the page. To see it more clearly:

In the first case we would find:

• <h1>A different blog</h1>
• <h2>My first article</h2>
• <h2>Interesting links</h2>

In the second case:

• <h2>A different blog</h2>
• <h1>My first article</h1>
• <h2>Interesting links</h2>

We recommend the first case when possible.

However, we cannot ignore the fact that more and more websites use a structure with a menu bar that contains the logo and navigation links, and then the content of the website. It is true that in these cases it would be strange if all web pages have the same h1 (the textual alternative to the logo) and that the title of the content, which acts visually as a first-level heading, is an h2. That is why, in these cases, it can be considered that the title of the content is the h1. Our recommendation, to avoid leaving an h2 before the h1 with the title of the site, is to treat this logo (and its textual alternative) or text as a navigation link. We could say that visually it acts as such because it is already a standard to find a logo in the menu and know that its use is to navigate to the home page. In this case, we would find:

The logo or title of the site:

• <a href="#" aria-label="A different blog"> <img src="logo.png" alt=""> </a>

The heading structure:

• <h1>My first article</h1>
• <h2>Interesting links</h2>

It would be a correct heading structure and even considered by the WAI, but, as we can see, we did not solve the logical information order problem because "Interesting links" (heading in the footer) still seem to belong to "My first article".

To solve this problem, we recommend the use of HTML page regions (header, footer, nav, aside, etc.) that allow us to define which is the main content and which, such as “interesting links”, is complementary (for example, by placing it inside the "aside" region). Regions (and aria landmarks) is an extensive topic and we will discuss it specifically in another article.

Checklist to test the accessibility of headings

• There is only one h1 on the web.
• No level is skipped between headings (from a h1 to a h3 or from a h2 to a h4).
• Headings are descriptive.
• They are correctly identified as such using the HTML h1-h6 tags or the ARIA role=”heading” and the aria-level attribute indicating the level of the heading.

How to test headings

We may the following resources useful for testing:

• The HeadingsMap extension to visually obtain a list of headings.
• The WebAIM Guide to Testing with a Screen Reader.

Alejandro Suárez Domínguez.