Ask the Community
landmark-main-is-top-level
Rule Severity : Moderate
Description
The landmark-main-is-top-level rule ensures that the main landmark, represented by <main> or an element with role="main", is a direct child of the <body> element and is not nested inside any other landmark region. When the main landmark is nested inside another landmark (such as a <div role="region"> or a <section>), it may not function as expected and can confuse users who rely on landmark navigation to jump directly to primary page content.
This rule meets WCAG requirements by:
- Exposing Document Structure (WCAG 1.3.1 Info and Relationships): It ensures the primary content region of the document is correctly positioned in the accessibility tree at the top level, making its structural role programmatically determinable.
- Enabling Content Navigation (WCAG 2.4.1 Bypass Blocks): It ensures users of assistive technologies can jump directly to the main content via landmark navigation, providing an efficient mechanism to skip repeated blocks such as headers and navigation.
To comply with this rule, ensure that <main> or role="main" is a direct child of <body> and not contained within any other landmark element.
Examples
This example shows <main> nested inside a <div> with role="region", which removes it from its expected top-level position.
Here, <main> is a direct child of <body>, giving it the correct top-level document scope.
How to fix?
To fix violations of the landmark-main-is-top-level rule, follow these steps:
-
Move the
<main>element (or element withrole="main") so that it is a direct child of the<body>element. -
Remove any unnecessary wrapper landmark elements that surround
<main>. Layout divs without landmark roles are acceptable wrappers, but landmark regions (header, footer, nav, aside, section with accessible name) should not contain<main>. -
Ensure each page has exactly one
<main>element at the top level to provide a clear and unique entry point for the primary page content.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!