Page must have a way to bypass repeated blocks of content

Rule Description

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.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): MUST
  • Section 508: MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 2.4.1 Bypass Blocks
Section 508 Guidelines:
  • 1194.22 (o) Repetitive navigation link skip method

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.

Begin code:
<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>
End code.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: bypass