Page must have means to bypass repeated blocks

Since web sites often display secondary, repeated content on multiple pages (such as navigation links, heading graphics, and advertising frames), keyboard-only users benefit from faster, more direct access to the primary content on a page. This reduces keystrokes and minimizes associated physical pain.

For users who cannot use a mouse, navigating with a keyboard is more difficult and time-consuming when the interface does not include methods to make keyboard navigation easier. For example, to activate a link in the middle of a web page, a keyboard user may have to tab through a large number of links and buttons in the header and main navigation of the page.

At the extreme end, users with severe motor limitations might require several minutes to tab through all of those elements, and can lead to fatigue and possible physical pain for some users. Even users with less severe constraints will require longer than mouse users, who can click on the desired link in a second or two.

Fixing the problem

Ensure each page has a main landmark to provide a mechanism to bypass repeated blocks of content or interface elements (like header and navigation) and quickly arrive at the main content.

Landmarks SHOULD be used to designate pre-defined parts of the layout such as the main content section.

A page SHOULD NOT contain more than one instance of the main landmark.

HTML5 vs. ARIA:

As a general rule, it is usually best to use native HTML elements rather than their ARIA equivalents whenever possible. Therefore, even though the ARIA Role role="main" is listed among landmarks by most screen readers, use the corresponding main HTML5 element instead.

Good Example: Using Appropriate Landmarks

In this example, all content is inside a landmark, and landmarks are used to properly identify the various types of content.

<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>