landmark-main-is-top-level
Main landmark must be top-level
Checks that the main landmark (role="main" or <main>) is not nested inside another landmark region.
Applies to. Applies whenever the page contains at least one main landmark (explicit role="main", or an implicit <main> element). A custom element whose ElementInternals give it a landmark role (this.attachInternals().role), with no role attribute naming another, is a landmark as a native element with that role is.
Expectation. No main landmark has an ancestor that is itself any landmark region. A main region nested inside another landmark is not a top-level, whole-page main content area and confuses landmark-based navigation for assistive technology users.
Examples
<main>Content</main>
The main landmark is not nested inside any other landmark.
<div role="navigation"><main>Nested main</main></div>
The main landmark is nested inside a navigation landmark instead of being top-level.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
LANDMARK_MAIN_NOT_TOP_LEVEL
- Find the main landmark the report names and the landmark it sits inside.
- Open a screen reader's landmarks list, or the Accessibility pane, and look at where main appears.
- Check whether main is the outermost container of the page's primary content.
Pass. The main landmark sits at the top level of the page, outside any other landmark.
Fail. The main landmark sits inside another landmark, which confuses landmark navigation, a best-practice miss under the WAI-ARIA main role.