Skip to main content

Provide a Way to Bypass Repeated Blocks of Content

WCAG 2.1 Ultimate Guide
Disabilities Affected: Mobility, Visual
Success Criterion: 2.4.1
Level: A
WCAG Link
A mechanism must be available to bypass blocks of content that are repeated on multiple web pages, such as navigation menus, headers, or sidebars. The most common method is a “Skip to main content” link.

Why It Matters

Keyboard users, including screen reader users, must navigate sequentially through all interactive elements. On pages with large navigation menus or headers, this means tabbing through many links before reaching the main content on every single page. A bypass link allows these users to jump directly to the primary content area, saving significant time and effort.

Fixing the Issue

Provide a link at the very beginning of the page (often the first focusable element) that targets the ID of the main content container. This link can be visually hidden until it receives keyboard focus. Ensure the target element (<main> or a <div> with id=”main-content”) exists and is focusable or contains focusable elements. Alternatively, use heading elements or ARIA landmarks effectively, as some assistive technologies allow users to navigate by these structures, implicitly providing a way to bypass blocks. However, an explicit skip link is the most robust technique.

Good Code Example

A common implementation of a “Skip to main content”

  • <body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header>
    <nav>...</nav>
  </header>

  <main id="main-content" tabindex="-1">
    <h1>Page Heading</h1>
    <p>This is the primary content of the page.</p>
    </main>

  <footer>
    </footer>

  <style>
    /* Style to hide the link visually until focused */
    .skip-link {
      position: absolute;
      top: -40px; /* Position off-screen */
      left: 0;
      background: #000000;
      color: white;
      padding: 8px;
      z-index: 100;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0; /* Bring into view on focus */
    }
    /* Ensure main content can receive focus for the link to work properly */
    main:focus {
        outline: none;
    }
  </style>
</body>

  • Page Heading

    This is the primary content of the page.

Bad Code Example

A page lacking any mechanism to bypass repeated blocks:

  • <body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/accessibility-services/full-service-website-remediation/">Full-Service Website Remediation</a>
      <a href="/accessibility-services/self-service-website-remediation/">Self-Service Website Remediation</a>
      <a href="/about/">About Us</a>
      <a href="/contact/">Contact Us</a>
      </nav>
  </header>

  <main id="main-content">
    <h1>Page Heading</h1>
    <p>Users must tab through all header links to get here.</p>
  </main>

  <footer></footer>
</body>

  • Page Heading

    Users must tab through all header links to get here.

Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult