Page must have a way to bypass repeated blocks of content
Each page must have 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.
The Algorithm, in Simple Terms
Checks for least one of the following features:
- an internal skip link
- a heading
- a landmark region
Why this is Important
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.
How to Fix 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, its corresponding HTML5 element <main> should be used instead.
Good Example: Using Appropriate Landmarks
In this example, all content is inside of 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>
- HTML 4