How to fix landmark banner is top level on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Open your root layout component or HTML shell (e.g., _app.jsx, layout.tsx, _document.jsx, or base.html).
2. Ensure your `<header>` (or component that renders as `<header>`) is placed as a sibling of `<main>` at the top level of `<body>`, not nested inside `<main>` or any other element with a landmark role.
3. Remove `role="banner"` from any nested header copies; only the outermost, body-level header should carry this role (it is implicit on `<header>` when used outside `<article>`/`<section>`).
4. Run automated checks with axe-core in CI (axe-playwright, jest-axe) to prevent regression.

What is landmark banner is top level?

Every webpage has a special "banner" landmark — the main site header that typically contains your logo, navigation, and tagline. Screen readers and assistive technologies use landmarks like banners to let users jump quickly around a page without reading everything. The rule is simple: the banner landmark must sit at the top level of the page (directly inside `<body>`), never wrapped inside another landmark region like `<main>`, `<aside>`, `<section>`, or `<article>`. When it is nested, assistive technology can't find it in the expected place, and some tools won't announce it as the banner at all.

Roughly 7 million Americans use a screen reader, and many more rely on keyboard or switch navigation. When your banner landmark is buried inside another landmark, those users lose the ability to skip directly to the header or understand the page structure — a core WCAG 2.1 requirement (Success Criterion 1.3.6 / 4.1.2). Failing WCAG landmarks is an accessibility legal risk: ADA and similar laws in the EU, UK, Canada, and Australia have led to lawsuits and settlements against e-commerce stores of all sizes. Fixing it also demonstrates technical quality to search engines that increasingly evaluate page structure as a signal of content organisation.

See the complete Landmark banner is top level guide for every platform and the full background.