landmark-banner-is-top-level
Banner landmark must be top-level
Checks that the banner landmark (role="banner" or a non-nested <header>) is not nested inside another landmark region.
Applies to. Applies whenever the page contains at least one banner candidate: explicit role="banner", OR a <header> with NO role attribute at all, regardless of nesting. 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 banner candidate has an ancestor that is itself any landmark region. A banner nested inside another landmark is not a top-level, whole-page banner and confuses landmark-based navigation for assistive technology users.
Examples
<header>Site header</header>
The banner is not nested inside any other landmark.
<div role="navigation"><div role="banner">Nested banner</div></div>
A banner landmark nested inside another landmark no longer functions as the page's single top-level header.
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_BANNER_NOT_TOP_LEVEL
- Find the banner (a header or role="banner") the report names and the landmark it sits inside.
- Open a screen reader's landmarks list, or the Accessibility pane, and look at where the banner appears.
- Decide whether this is the page-wide header; if it is the header of an article or section, it should not be a banner.
Pass. The banner sits at the top level of the page, outside any other landmark.
Fail. A banner sits inside another landmark, which confuses landmark navigation, a best-practice miss under the WAI-ARIA banner role.