How to fix landmark banner is top level on Webflow

Steps for Webflow

1. Open your project in the Webflow Designer.
2. In the Navigator panel, locate the element tagged as 'Header' (Webflow uses a dedicated Header element that outputs `<header>`).
3. Drag the Header element to be a direct child of the Body node in the Navigator — it must not sit inside a Section, Div Block, or any other element that carries a landmark role.
4. If any wrapping Div Block has an ARIA Role set (via Element Settings → ARIA), remove that role or change it to 'none'.
5. Publish and verify with axe DevTools.

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.