WebAIM - Web Accessibility In Mind

E-mail List Archives

for

From: Sumit Patel
Date: Aug 19, 2025 7:55AM

Hi all,

I hope you're doing well.

I have a query regarding the heading hierarchy used within applications,
specifically in terms of accessibility and best practices.

Let’s take the example of an application called **"ABC"**, and a page
within it named **"Screen 1"**. This is a common pattern I’m seeing in many
applications:

* At the top of the page, on the left side, we have the **logo**.
* To the right of the logo, we display the **application name ("ABC")**.
* Then, in the main content section, the first visible heading is the
**page title ("Screen 1")**.

Now, regarding heading markup, I usually mark:

* `"Screen 1"` as **heading level 1 (`<h1>`)**
* `"ABC"` as **heading level 2 (`<h2>`)**

Even though the application name appears visually before the page title, I
feel `"Screen 1"` semantically deserves the `<h1>` as it represents the
main content of the page.

I understand there are two generally accepted best practices:

1. Heading levels should **not be skipped**.
2. The **main content** of the page should **start with an `<h1>`**.

From a **screen reader user’s perspective**, marking `"Screen 1"` as `<h1>`
is helpful, as many users rely on heading navigation (e.g., using the "1"
key to jump to the main heading). This makes `"Screen 1"` a logical
candidate for the primary heading. Also, as the page title, it makes sense
to be the most prominent semantically.

That said, marking **both** `"ABC"` and `"Screen 1"` as `<h1>` would remove
this advantage for screen reader users, and could make the structure less
clear. So, I don't think that would be ideal either.

I'd really appreciate your thoughts on this.

* Do you agree with this approach?
* Is there a better or more widely accepted method to handle this kind of
heading structure?

Looking forward to your suggestions.

Regards,
Sumit.