Can You Skip the Navigation? Bypass Blocks

Imagine navigating a website with only your keyboard. You hit Tab to move through interactive elements. First tab: logo link. Second tab: search box. Third tab: first navigation link. Fourth, fifth, sixth tabs: more navigation links. Seventh tab: social media icons. Eighth tab: language selector. Finally, after nine or ten tab presses, you reach the actual content of the page.

Now imagine doing this on every single page you visit. Every. Single. Time.

This is the daily reality for keyboard users and screen reader users when websites don't provide a way to bypass repetitive content. It's exhausting, frustrating, and completely unnecessary.

The Standard

WCAG 2.4.1 Bypass Blocks - A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

This is a Level A requirement - the most fundamental level of accessibility. Sites must provide a way for users to skip past repeated content blocks like navigation menus, headers, and sidebars to get directly to the main content.

Who Needs Bypass Mechanisms?

Screen reader users - Who navigate sequentially through content and would otherwise need to hear the entire navigation read aloud on every page
Keyboard-only users - Including people with motor disabilities who can't use a mouse
Power users - Anyone who prefers keyboard navigation for efficiency
People with cognitive disabilities - Who benefit from quickly reaching the content they're looking for without distraction

Three Ways to Bypass Blocks

There are three main techniques for meeting this standard. Most sites should implement all three, as they serve different users and use cases.

1. Skip Links

Skip links are hidden links that appear when they receive keyboard focus. Typically the first interactive element on a page, they let users jump directly to the main content with one keystroke.

A proper skip link:

Is the very first focusable element on the page
Becomes visible when focused (hidden otherwise)
Links to an anchor with id="main-content" or similar
Actually moves keyboard focus to that location, not just scrolls
Has clear, descriptive text like "Skip to main content"

2. ARIA Landmark Regions

Landmark regions let screen reader users navigate by page structure rather than sequentially. Common landmarks include:

<header role="banner"> - Site header
<nav role="navigation"> - Navigation menus
<main role="main"> - Main content (only one per page)
<aside role="complementary"> - Sidebars
<footer role="contentinfo"> - Site footer
role="search" - Search functionality

HTML5 semantic elements (<header>, <nav>, <main>, etc.) create landmark regions automatically, though adding explicit ARIA roles improves compatibility with older assistive technology.

3. Proper Heading Structure

Screen reader users can navigate by headings, jumping from one heading to the next. A logical heading hierarchy (H1 for page title, H2 for major sections, H3 for subsections, etc.) provides another way to navigate quickly through content.

Skip Links in Drupal

Drupal core has included skip links since Drupal 7. All core themes (Olivero, Claro, Stark, etc.) include a "Skip to main content" link by default.

How Drupal Implements Skip Links

The skip link appears in every core theme's template:

Located immediately after the opening <body> tag
Links to #main-content
Uses the visually-hidden and focusable classes
Becomes visible and properly styled when focused

The target anchor is typically on the <main> element or a wrapper div around the main content.

Drupal Landmarks

Modern Drupal themes use HTML5 semantic elements with proper landmark roles:

Header region uses <header>
Navigation blocks use <nav>
Main content region uses <main> with id="main-content"
Sidebars use <aside>
Footer uses <footer>

If you're building a custom Drupal theme, follow these conventions. Don't remove the skip link or change its target without providing an equivalent alternative.

Common Drupal Skip Link Issues

While core themes handle this well, problems can occur with:

Contrib themes - Some may hide the skip link improperly or skip it entirely
Admin themes - The skip link can be hidden behind the admin toolbar if not styled correctly
Custom themes - Developers sometimes remove the skip link thinking it's unnecessary or ugly

Skip Links in WordPress

WordPress skip link implementation is more variable than Drupal. Whether your site has skip links depends entirely on your theme.

Block Themes (WordPress 5.9+)

WordPress automatically adds a skip link to block themes (full site editing themes) if the template contains a <main> element. When you set a Group, Template Part, or Query block's HTML element to <main> in the site editor, WordPress generates the skip link automatically.

To check or fix skip links in block themes:

Open the site editor
Go to the template that needs a skip link
Select the group/container holding your main content
In the block settings under Advanced, set the HTML element to <main>
Save the template

Classic Themes

Classic WordPress themes must implement skip links manually in their templates. Default WordPress themes (Twenty Twenty-One, Twenty Twenty-Two, etc.) include skip links, but many commercial and custom themes don't.

To add a skip link to a classic theme, add this code right after the <body> tag opening (typically in header.php):

<a class="skip-link screen-reader-text" href="#content"> <?php _e( 'Skip to content', 'your-theme-slug' ); ?> </a>

Then add corresponding CSS to hide the link until focused:

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { clip: auto !important; display: block; height: auto; width: auto; background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); color: #21759b; font-size: 14px; padding: 15px 23px 14px; text-decoration: none; z-index: 100000; left: 6px; top: 7px; }

Make sure the target id="content" exists on your main content container.

WordPress Plugins for Skip Links

If your theme lacks skip links, you can add them with plugins:

WP Accessibility by Joe Dolson - Adds skip links and fixes various accessibility issues
Skip Links for Menus - Automatically adds skip links to all menus and table of contents

Common WordPress Skip Link Problems

Missing entirely - Many themes simply don't include them
Broken links - Skip link exists but target ID doesn't
Focus doesn't move - Page scrolls visually but keyboard focus stays in header
Hidden permanently - Skip link never becomes visible, even on focus
Wrong positioning - Skip link appears inside navigation instead of before it

Testing Your Skip Links

Log out or use incognito mode - Admin toolbars can interfere with testing
Load your homepage
Press the Tab key once - The first thing you should see is the skip link appearing
Press Enter - The page should jump to main content
Press Tab again - Focus should be on the first interactive element in main content, not back in the header

If the skip link doesn't appear, doesn't work, or focus doesn't move correctly, you have a problem that needs fixing.

Testing with Screen Readers

Open a screen reader (NVDA, JAWS, VoiceOver, Orca) and:

Navigate by headings - can you jump between major sections?
Navigate by landmarks - can you jump to header, navigation, main, footer?
Use the elements list - do all regions appear with meaningful labels?

Beyond the Minimum

While a single "Skip to main content" link satisfies the standard, consider providing multiple skip links for complex layouts:

"Skip to navigation"
"Skip to search"
"Skip to sidebar"
"Skip to footer"

This is especially useful on pages with multiple major sections or when sidebars contain important complementary content.

You can also add same-page navigation links within long content - like a table of contents that links to major sections. These aren't technically "skip links" but serve a similar purpose of helping users navigate efficiently.

Back to Top Buttons

On long pages, a "back to top" button helps users return to navigation without excessive scrolling. While this doesn't satisfy the bypass blocks requirement (it goes the wrong direction), it's still useful for accessibility. If you add one:

Use a real <button> element, not a div
Include visible text or a clear aria-label, not just an icon
Make it keyboard accessible with proper focus indicators
Move focus to the top when activated, not just scroll visually

The Bottom Line

Bypass blocks isn't about accommodating edge cases - it's a fundamental accessibility requirement that affects millions of users daily. Screen reader users and keyboard-only users should never have to tab through dozens of navigation links on every page just to reach the content they came for.

In Drupal, this works out of the box with core themes. Make sure not to break it if you're building custom themes. In WordPress, block themes handle it automatically when you use <main> elements properly, but classic themes need manual implementation.

Test your skip links by actually using them. Press Tab on your homepage right now. Does a skip link appear? Does it work? If not, fix it - this is Level A accessibility, required by law in many jurisdictions.

Give your keyboard users a shortcut to what matters. They'll thank you every single time they visit your site.