axe-core landmark-banner-is-top-level error: banner nested inside main

axe-core landmark-banner-is-top-level error: banner nested inside main - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A banner landmark (site header) is nested inside the main landmark, which breaks the landmark outline. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core landmark-banner-is-top-level error: banner nested inside main

Fix it step by step

Step 1

Move the header element with the banner role out of the main element so it is a top-level landmark.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

Structure the page as header, nav, main, footer as siblings, not nested.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Re-run axe and check the landmark outline in axe DevTools: banner must be top-level.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Confirm no other top-level landmark is nested inside main either.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• Page-specific headers inside main are fine; the banner is the site-wide header only.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule landmark-banner-is-top-level, WCAG 1.3.1).

Variant phrasings

axe landmark-banner-is-top-level: banner nested inside main

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A banner landmark (site header) is nested inside the main landmark, which breaks the landmark outline. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_Uts3xzkr2fjG4LF9mWbTQg