Ensure the banner landmark is at top level

The landmark-banner-is-top-level rule checks that each role="banner" landmark is not nested inside another landmark. Although HTML5 allows multiple <header> elements, ARIA landmarks like role="banner" should typically appear only once and at the top level of the page.

What is being tested?

This rule verifies that:

• Each role="banner" element is not inside another landmark (like main, complementary, or contentinfo).
• The banner landmark correctly designates the sitewide header, not local or nested sections.

Why it matters

The banner landmark helps screen reader users quickly navigate to the page’s global header. If the banner is nested inside another landmark, it loses its role as a top-level reference point, making navigation harder and potentially confusing.

Landmarks define major page regions, while headings organize content inside those regions. Mixing or nesting landmarks can disrupt the structural clarity of a page.

Best practices

• Use only one role="banner" landmark per page, typically in the main site header.
• Ensure the banner is not placed inside another landmark like main, complementary, or contentinfo.
• For local section headers, use <header> without role="banner", or choose another landmark role.

Note

Landmarks define the structural layout of a page, while headings define sections within the content. Use them together to create a clear and accessible experience for all users.