bypass

Keyboard and assistive-technology users often move through a page in order. If every visit starts with dozens of identical navigation links, the journey is slow and tiring. A clear way to jump past those repeated sections such as a skip link, well-placed landmark or well structured heading hierarchy, lets people reach the main content quickly. When this mechanism is missing, users who can’t point with a mouse must tab through the same links on every page, increasing frustration and fatigue.

Pass Patterns

Skip link before navigation

The first interactive item sends focus directly to the page’s primary content.

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


<header>…</header>
<nav>…</nav>


<main id="main">
    <!-- Primary content -->
</main>

Semantic landmark layout

Built-in landmarks let assistive technology jump between regions without extra links.

<header>…</header>
<nav>…</nav>


<main>
    <article>…</article>
    <aside>…</aside>
</main>


<footer>…</footer>

Fail Patterns

No skip link and no landmarks

All navigation sits before the content, and nothing indicates where the main region starts.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page title</title>
    </head>
    <body>
        <div class="nav">…long list of links…</div>
        <div>
            <!-- Main content, but not identified as such -->
        </div>
    </body>
</html>

WCAG techniques

Sufficient techniques

• G1: Adding a link at the top of each page that goes directly to the main content area
• G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
• ARIA11: Using ARIA landmarks to identify regions of a page

Advisory techniques

• G124: Adding links at the top of the page to each area of the content
• SCR28: Using an expandable and collapsible menu to bypass block of content

ACT Rules

• Document has heading for non-repeated content
• Document has a landmark with non-repeated content
• Document has an instrument to move focus to non-repeated content

Try It Yourself

Using a keyboard

1. Open the page in a browser.
2. Press the Tab key.

Expected result: The page focus moves to a link that goes directly to the page content.

Actual result: The page focus moves through each link and control until it gets to the main content.

Using a screen reader

1. Open the page in a desktop screen reader.
2. Open the screen reader’s elements list (NVDA Insert+F7, VoiceOver Control+Option+U), and go to the “Landmarks” section.

Expected result: The landmark list contains at least one landmark that lets users skip past repeated content.

Actual result: The landmark list is empty.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Keyboard
• Motor and Mobility
• Switch Access

Related Issues

• frame-focusable-content
• nested-interactive
• scrollable-region-focusable
• skip-link
• tabindex