Missing bypass navigation

headings/none

WCAG success criterion: 2.4.1 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Navigation & Operation
Default severity: high
axe-core rule: bypass

Why we flag this

Keyboard users must tab through the navigation on every page change.

Missing skip link, missing HTML5 landmarks.

What the rule checks

Scope. Every top-level document.

Expectation. SC 2.4.1 is met by any one of headings (H69), a main landmark (ARIA11) or a skip link (G1). Fails when none of the three exists and the page marks up a navigation or banner block, the blocks Understanding 2.4.1 names as repeated. Without such a block, whether anything repeats across pages cannot be told from one document: review. While a modal dialog is open, the mechanisms are missing for the moment of measurement: review. role="heading" and role="main" count like native ones, also inside open shadow roots; a hidden heading (hidden attribute) bypasses nothing. One finding at the html element.

Source. WCAG 2.2 SC 2.4.1 Bypass Blocks; ACT cf77f2 (Bypass Blocks of Repeated Content); G1, H69, ARIA11

Detection: shared; needs dom, computed_style.

Failing example

The check reports a violation here. Corpus case structure_bypass_missing, element html. The page may contain further findings for other rules.

structure_bypass_missing.htmlHTML

<!DOCTYPE html>
<html lang="en_US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <!-- An old intranet page (#783): no <title> at all, a locale-style lang
         value ("en_US" uses an underscore, which BCP 47 does not allow, so
         the primary subtag is not "en"), and a repeated navigation block with
         no way to bypass it: no heading, no main landmark, no skip link. -->
    <nav>
        <a href="/">Intranet home</a>
        <a href="/staff/">Staff directory</a>
        <a href="/forms/">Request forms</a>
        <a href="/help/">IT help desk</a>
    </nav>
    <!-- The only heading is hidden, so it bypasses nothing. -->
    <h1 hidden>Intranet</h1>
    <div class="content">
        <p>Holiday requests for next year are due by the end of the month.</p>
        <p>Use the staff portal to submit them.</p>
        <!-- An embedded calendar with its own title: it titles the frame
             document, not this page. -->
        <iframe title="Staff calendar" width="300" height="150"
            srcdoc="<!DOCTYPE html><html lang='en'><head><title>Staff calendar</title></head><body><p>No events today</p></body></html>"></iframe>
    </div>
</body>
</html>

Passing example

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

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