Each page on a website must have a main landmark to provide a way for users to bypass repeated blocks of content or interface elements (like headers and navigation), allowing them to arrive at the main content as quickly as possible.
Keyboard-only users benefit from faster, more direct access to the primary content on any given web page.
Users who cannot use a mouse will find it more time-consuming to interact with websites that don’t cater to keyboard navigation, leading to a poor user experience.
Some users may even experience fatigue and physical pain when using a site that isn’t keyboard navigable.
Ensure each page on a site has a main landmark, which is used to designate pre-defined parts of the layout such as the main content section. A page shouldn’t contain more than one main landmark.
<header>
<div>This is the header.</div>
</header>
<nav>
<div>This is the navigation.</div>
</nav>
<main>
<div>This is the main content.</div>
<section>
<div>This is a section.</div>
</section>
<article>
<div>This is an article.</div>
</article>
<aside>
<div>This is an aside.</div>
</aside>
</main>
<footer>
<div>This is the footer.</div>
</footer>
Copy
For more examples, visit the following pages in the W3C’s GitHub’s ATC Rules library: