Ensure the Main Landmark Is At the Top Level
Blind
Hearing
Mobility
WCAG 2.1 Level A
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”).
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.
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”.
A simplified web page, stripped down to just the bare landmark essentials, might look something like this:
<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