Content outside a landmark region

landmarks/content-outside

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: region

Why we flag this

Content outside a landmark region.

What the rule checks

Scope. Rendered content in the body: text and named content elements.

Expectation. Flags the outermost rendered element that holds content but contains no landmark, once per block. Skip links (same-page fragment links before the first link that leaves the page) are exempt, whatever their language; the same link after regular links is ordinary content. Content hidden with the hidden attribute is not content. ARIA landmarks count like native ones, also inside open shadow roots. Best practice without a criterion.

Source. Best practice: ARIA Authoring Practices, Landmark Regions (all perceivable content should be in a landmark); axe region

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 passes here and reports nothing. 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.