Missing navigation landmark

landmarks/navigation-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: low
axe-core rule: landmark-navigation-present

Why we flag this

Screen reader users cannot jump straight to the navigation.

No element with role="navigation" (implicit via <nav> 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 navigation landmark (nav or role="navigation"). A page may legitimately have no navigation (a single delivery note, a consent wall), so this is an expectation, not a failure. When the desktop and the mobile navigation are separate elements shown per breakpoint, each viewport has one: nothing to report. One review at the html element.

Source. WAI-ARIA 1.2 navigation 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_responsive_chrome. The page may contain further findings for other rules.

structure_responsive_chrome.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gift cards – 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; }
        .mobile-only { display: none; }
        @media (max-width: 600px) {
            .desktop-only { display: none; }
            .mobile-only { display: block; }
        }
    </style>
</head>
<body>
    <!-- A responsive template (#783): header, navigation and main heading
         exist twice, one copy per breakpoint, and CSS shows exactly one of
         each. In every viewport the page has one banner, one navigation and
         one h1; the hidden copy is not rendered and not exposed. -->
    <a href="#main" class="skip-link">Skip to content</a>
    <header class="desktop-only">
        <p>Acme Hardware – tools since 1952</p>
    </header>
    <header class="mobile-only">
        <p>Acme</p>
    </header>
    <nav class="desktop-only">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/shop/">Shop</a></li>
            <li><a href="/gift-cards/">Gift cards</a></li>
        </ul>
    </nav>
    <nav class="mobile-only">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/menu/">Menu</a></li>
        </ul>
    </nav>
    <main id="main">
        <h1 class="desktop-only">Gift cards for every workshop</h1>
        <h1 class="mobile-only">Gift cards</h1>
        <p>Choose an amount between 10 and 200 euros.</p>
        <h2>How to redeem</h2>
        <p>Show the card at the till or enter its code at checkout.</p>
    </main>
    <footer>
        <p>Acme Hardware, Berlin</p>
    </footer>
</body>
</html>

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