What would be the recommended level for "complementary" headers?

Question

I am currently working on the accessibility of the open source software XWiki. I want to update the way we handle the headers on our page but I lack facts and information to back up this change.

Our solution so far is to use H1s for each complentary block. The quantity of those blocks depends on the instance, our default one has 5, and it's not uncommon for instances to have more.

Does it make sense to use H1 in the complementary elements in the side panels, or should we prefer using H2?

On one hand, the complementary content is not bound to the main page content, so it would make sense for it to be in a separate 'header-tree'. On the other hand, it's more or less the default today to have only one H1 per web page and a lot of accessibility tools / audits count having more than one H1 as against the best practice. Here, we can see that even if the W3C's page has a couple H1s, it keeps H2s on complementaries:

From what I understood, this one h1 rule is not strictly defined in the WCAG standards or anywhere by the W3C.

A third "in between" solution we thought of in the community would be to introduce h1 headers for each complementary column (right and left), so that we only have a total of three h1 (which is better than 6+ ...).

What is the most appropriate header structure to use for those side columns?

Answer 1

I would go with h2, for the reasons you mention and because even the page you're using as an example does it. Additionally, the W3C mentions it.

Step 1: Identify the logical structure

• Break the page into perceivable sections called "areas".

• Designers typically indicate areas visually using alignment and spacing of content.

• Regions can be further divided into logical sub-areas as needed.

• An example of a sub-area is a portlet in a portal application.

Now, let's consider your screen capture. The first complementary area you defined (the top left) is not a complementary, but a navigation. Content footer and Additional information belong to the main content, so they can't be at the same level (a requirement for Complementary Landmarks). The same goes for the banner (what you have there should actually be a header tag; the banner can't be above main in the hierarchy).

This leaves us with the complementary areas in the aside, which seem to be correct. However, the complementary areas are the areas themselves, not the headings. While using H1 might not be wrong per se, an h1 tag is commonly recognized as a page title by most people, software, and robots. Within the context of the page, I think "Home" is more important than the titles of the complementary areas. Home informs the user about the current page, whereas the complementary areas inform users about available actions within the context, which might relate to the content inside main, as in the W3C example, or might be site-wide interactions, as in your example.