R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Main Landmark Must Be Top-Level

  • June 1, 2025

Main Landmark Must Be Top-Level

Rule ID: landmark-main-is-top-level
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: Deque Best Practice

How to Fix the Problem

Ensure that the <main> landmark is not nested inside any other landmark. According to best practices and HTML standards, the <main> element (or any element with role="main") should be a top-level structural element directly under the <body> tag and not contained within other landmarks such as <header>, <nav>, or <footer>.

Steps to correct the issue:

  1. Place <main> correctly:

    • Make sure the <main> element is directly placed under the <body> and not inside other landmark elements.

    • Valid structure example:

      html
      <body>
      <header role="banner">...</header>
      <nav role="navigation">...</nav>
      <main role="main">Main content here</main>
      <footer role="contentinfo">...</footer>
      </body>

  2. Use both HTML5 elements and ARIA roles:

    • Although redundant, it’s currently best practice to include both the semantic HTML5 element (<main>) and its ARIA role (role="main"), e.g.:

      html
      <main role="main">...</main>

  3. Avoid nesting landmarks:

    • Do not place the <main> element inside a <form>, <header>, <nav>, or <footer>.

    • If using <form>, ensure it doesn’t have an accessible name when it contains <main>.

Why it Matters

Proper use of the <main> landmark significantly improves navigation for screen reader users. When content is organized using recognizable and appropriately placed landmarks, assistive technologies can quickly jump to the main content area, bypassing repetitive elements like headers or navigation menus.

If the <main> element is nested inside another landmark:

  • Screen readers may skip or misidentify it.

  • Users might struggle to locate the primary content of the page.

  • The purpose and structure of the page become unclear, especially to users who rely heavily on landmarks for navigation.

Correct landmark structure ensures predictable and efficient navigation, making your site more accessible and user-friendly.

Rule Description

This rule enforces that the <main> landmark must be a top-level element in the page’s content hierarchy. It should not be a descendant of any other landmark. All page content should be split into clear, accessible sections using landmark roles or HTML5 elements like <header>, <nav>, <main>, and <footer> to facilitate structured navigation.

The Algorithm (in Simple Terms)

  • Check that each <main> or role="main" element is not inside any other landmark (e.g., banner, navigation, contentinfo).

  • Ensure the main content exists in a standalone region, improving semantic clarity and screen reader accessibility.

Tags:
Share:

Leave A Comment