Missing banner landmark

landmarks/banner-missing

WCAG success criterion: 1.3.1 (level A)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Structure & Semantics
Default severity: medium
axe-core rule: landmark-banner-present

Why we flag this

Assistive technologies cannot identify the site header.

No element with role="banner" (implicit via <header> or explicit) present.

What the rule checks

Scope. Every top-level document. A body without any content has nothing to structure and is not applicable.

Expectation. Asks for review when the document has no rendered banner landmark: a body-level header (not inside article, aside, main, nav or section) or role="banner". A header inside main or article is no banner. A page may legitimately have no site header, so this is an expectation, not a failure. One review at the html element.

Source. WAI-ARIA 1.2 banner role; ARIA Authoring Practices, Landmark Regions; review for SC 1.3.1/2.4.1

Detection: shared; needs dom, computed_style.

Failing example

The check flags this for review. Corpus case missing_main_landmark. The page may contain further findings for other rules.

missing_main_landmark.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Missing main landmark corpus case</title>
</head>
<body>
    <div>
        <h1>Page without a main landmark</h1>
        <p>No main element or role="main" anywhere on this page.</p>
    </div>
</body>
</html>

Passing example

The check reports nothing here. Corpus case structure_landmark_duplicates. The page may contain further findings for other rules.

structure_landmark_duplicates.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Order history – Acme Hardware</title>
    <style>
        body { font: 16px/1.5 sans-serif; margin: 0 16px; }
        a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }
        input, button { min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <!-- A single-page app shell (#783). The inactive view's main is hidden,
         which HTML allows (only one main without the hidden attribute). A
         promo widget inside main declares itself a banner, and a cookie note
         declares itself a second contentinfo. The article's header belongs to
         the article and is no banner. -->
    <a href="#orders" class="skip-link">Skip to content</a>
    <header id="site-header">
        <p>Acme Hardware</p>
    </header>
    <nav aria-label="Account">
        <ul>
            <li><a href="/account/">Account</a></li>
            <li><a href="/orders/">Orders</a></li>
        </ul>
    </nav>
    <main id="profile" hidden>
        <h1>Your profile</h1>
    </main>
    <main id="orders">
        <h1>Order history</h1>
        <div id="promo" role="banner">
            <p>Free delivery this week.</p>
        </div>
        <article>
            <header><h2>Order 2026-0412</h2></header>
            <p>Three boxes of wood screws.</p>
        </article>
    </main>
    <footer id="site-footer">
        <p>Acme Hardware, Berlin</p>
    </footer>
    <div id="cookie-note" role="contentinfo">
        <p>This site stores your basket in a cookie.</p>
    </div>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.