In the world of web accessibility, the banner landmark is a critical structural element. It identifies the global header of your website, which typically contains the site logo, title, and primary navigation. To ensure a logical and predictable experience for users of assistive technologies, a page should have only one banner landmark. This is a key principle of creating a well-structured and accessible website.

Think of your website as a newspaper. There is only one masthead at the top with the newspaper’s name. The same is true for your website. By making sure that your pages have only one banner landmark, you can create a more accessible and user-friendly experience for everyone. For a deeper dive into the world of accessibility, see our article on accessibility.

An illustration of a newspaper with a clear and logical headline, symbolizing the importance of the banner landmark.

Why Only One Banner Landmark?

The banner landmark is a primary point of orientation for screen reader users. They can use it to quickly jump to the top of the page and access the main navigation. When a page has multiple banner landmarks, it creates confusion. The user is presented with multiple “headers,” and it’s not clear which one is the primary, site-wide header. This redundancy makes the page harder to navigate. For a complete overview, see the MDN guide to the header element.

Correcting Multiple Banner Landmarks

This issue typically occurs when a developer uses multiple top-level `

` elements. The fix is to ensure that only the main, site-wide header uses the `

` tag at the top level of the document. Any other “header-like” sections should use a different element, like a `

`.
<!-- Before: Two top-level headers create two banner landmarks --> <body> <header> <h1>My Website</h1> </header> <header> <!-- Incorrect: This should not be a header --> <p>A secondary message or alert.</p> </header> <main>...</main> </body> <!-- After: Only one top-level header --> <body> <header> <h1>My Website</h1> </header> <div class="alert-banner"> <!-- Correct: Use a div for non-landmark headers --> <p>A secondary message or alert.</p> </div> <main>...</main> </body>

For more on the importance of a well-structured website, check out this guide to containing all content in landmarks.

An illustration of a checklist, symbolizing the importance of making sure your pages have only one banner landmark.

Frequently Asked Questions

What is a banner landmark?

A banner landmark identifies the header of a webpage, which typically contains the site title, logo, and main navigation. It is created using a top-level `<header>` element.

What is the difference between a site <header> and an <article> <header>?

A site `<header>` is a direct child of the `<body>` tag and gets the ‘banner’ landmark role. It’s for the global site header. An `<article>` or `<section>` can also have its own `<header>` element for introductory content, but this is not a ‘banner’ landmark and does not conflict with the main site header.

Why is it important for my pages to have only one banner landmark?

It’s important for your pages to have only one banner landmark so that users who rely on a screen reader have a single, consistent point of reference for the site’s header. Multiple banners create a confusing and redundant experience.

Ready to make your website more accessible? Start your Creeper audit today and see how you can improve your website’s accessibility.