Ensure the Main Landmark Is At the Top Level

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards state that the main landmark should not be contained within another landmark. All content should be contained within distinct regions such as the header (role=”banner”), content (role=”main”), and footer (role=”contentinfo”).

Why It Matters

When content is split between some high-level sections, it is easier to navigate. Content outside of these sections is difficult to find.

Using both HTML5 elements and ARIA landmarks is recommended, but HTML regions may be favored in the future.

Fixing the Issue

Developers should ensure the main landmark is not contained in another landmark.

All content should also be contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

It is a best practice to use both HTML5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like <header>, <nav>, <main>, and <footer>. Their ARIA counterparts are role=”banner”, role=”navigation”, role=”main”, and role=”contentinfo”. 

Good Code Example

A simplified web page, stripped down to just the bare landmark essentials, might look something like this:

Code example
<header role="banner"> <p>Put company logo, etc. here.</p> </header> <nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav> <main role="main"> <p>Put main content here.</p> </main> <footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer> Copy