Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content

Ensure each page provides a mechanism for users to bypass repetitive content, such as navigation menus, to quickly access the main content.

About This Rule

This rule ensures that web pages provide mechanisms to bypass blocks of content that are repeated on multiple pages, facilitating easier navigation for users, especially those relying on keyboards or assistive technologies.

Why It Matters

Web pages often include repeated content like navigation links, headers, and advertisements. For keyboard-only users and individuals relying on assistive technologies, navigating through these repetitive elements can be time-consuming and physically demanding. Providing a way to bypass such blocks enhances accessibility by allowing users to efficiently reach the primary content.

How to Fix

Implement one or more of the following methods to allow users to bypass repetitive content:

• Skip Links: Include a "Skip to main content" link at the beginning of the page that allows users to jump directly to the main content area.
• Landmark Roles: Use HTML5 elements like <main>, <nav>, and <header> to define page regions. Assistive technologies can navigate these landmarks, enabling users to skip repetitive sections.
• Heading Structures: Organize content with clear and hierarchical headings (<h1> through <h6>). This structure allows users to navigate content efficiently using assistive technologies.

Example

Correct Implementation with Skip Link

<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation and header content -->
<div id="main-content">
  <!-- Main content starts here -->
</div>

Correct Implementation with HTML5 Landmarks

<header>
  <!-- Header content -->
</header>
<nav>
  <!-- Navigation links -->
</nav>
<main>
  <!-- Main content -->
</main>
<footer>
  <!-- Footer content -->
</footer>