Multiple banner landmarks

landmarks/banner-duplicate

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-no-duplicate-banner

Why we flag this

Screen reader users cannot uniquely identify the page's 'header' region.

More than one element with role="banner" (implicit or explicit).

What the rule checks

Scope. Rendered banner landmarks.

Expectation. Flags a document with more than one rendered banner (document-scoped header or role="banner"), at the second. A header inside an article or main is no banner; a second header hidden at the current breakpoint is not rendered. Best practice without a criterion.

Source. WAI-ARIA 1.2 banner role (no more than one banner per document); axe landmark-no-duplicate-banner

Detection: shared; needs dom, computed_style.

Failing example

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

landmark_granular.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Granular landmark corpus case</title>
</head>
<body>
    <nav>
        <div role="banner">Banner nested inside a nav landmark (not top-level)</div>
        <div role="main">Main nested inside a nav landmark (not top-level)</div>
    </nav>
    <header>First header (duplicate banner 1 of 2)</header>
    <header>Second header (duplicate banner 2 of 2)</header>
    <footer>First footer (duplicate contentinfo 1 of 2)</footer>
    <footer>Second footer (duplicate contentinfo 2 of 2)</footer>
    <main>First main region (duplicate main 1 of 2)</main>
    <div role="main">Second main region (duplicate main 2 of 2)</div>
    <nav>Unnamed nav A</nav>
    <nav>Unnamed nav B</nav>
</body>
</html>

Passing example

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

landmark_header_in_main.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Header and footer scoped to main corpus case</title>
</head>
<body>
    <!-- #639: only the body-scoped header/footer are banner/contentinfo;
         the ones inside main/article are generic per HTML-AAM. -->
    <header class="site-header">
        <nav aria-label="Main navigation"><a href="/">Home</a></nav>
    </header>
    <main id="main">
        <div class="chapter">
            <div class="content">
                <header class="grid">
                    <h1>Chapter title</h1>
                    <p>Chapter introduction.</p>
                </header>
                <article>
                    <header><h2>Article heading</h2></header>
                    <p>Article text.</p>
                    <footer>Article footer</footer>
                </article>
            </div>
        </div>
    </main>
    <footer class="site-footer">Site footer</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.