R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Banner Landmark Must Be Top-Level

  • Home
  • Blog
  • Banner Landmark Must Be Top-Level
  • June 1, 2025

Rule ID: landmark-banner-is-top-level
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To fix this issue, make sure that each element with the ARIA role="banner" is placed at the top level of the page structure and is not nested within any other landmark element (such as role="main", role="complementary", role="contentinfo", etc.).

Even though HTML5 permits multiple <header> elements, there should be only one banner landmark per page, and it should sit directly under the <body> element—not inside other landmarks. Here’s an example of correct usage:

html
<body>
<header role="banner">
<!-- Site-wide header content here -->
</header><main role=“main”>
<!– Main content here –>
</main>
</body>

Avoid this incorrect structure:

html
<body>
<main role="main">
<header role="banner">
<!-- This is invalid. The banner is nested inside another landmark -->
</header>
</main>
</body>

Best Practices:

  • Use only one role="banner" per page.

  • Place it directly within the <body>, not within main, nav, aside, or footer.

  • If you’re using HTML5 elements (<header>) without ARIA, ensure you still follow the one-per-page rule for site-wide headers.

Why it Matters

The banner landmark is designed to identify the page’s main branding or header area. If this landmark is not placed at the top level of the page (i.e., it is inside another landmark), screen readers and other assistive technologies cannot reliably interpret it as the main header.

This disrupts navigability for users relying on screen readers. When landmarks are used correctly, users can quickly jump to major sections of a page like banner, main, navigation, and footer using keyboard shortcuts. Misplacing or nesting the banner interferes with that ability and makes it harder for users to orient themselves.

Rule Description

The role="banner" landmark must not be nested inside any other landmark. It must be a top-level element directly under the <body> tag. This ensures assistive technologies can correctly identify and provide access to the page’s main header area.

The Algorithm (in simple terms)

  1. The tool scans all elements with role="banner" (or <header> in HTML5).

  2. For each of these elements, it checks their parent elements.

  3. If it finds that the banner is placed within another landmark (like main, navigation, etc.), it flags an error.

  4. Only one top-level banner is allowed per page, and it must not be nested within another landmark.

Tags:
Share:

Leave A Comment