How to fix landmark banner is top level on Magento Open Source

Steps for Magento Open Source

1. Same file path as Adobe Commerce: app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/root.phtml.
2. Ensure `<header class="page-header">` is a direct child of `<body>`, not wrapped in `<main>` or any ARIA landmark div.
3. Clear cache (bin/magento cache:flush) and verify.

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.