Skip to main content

WCAG 2.4.1 — Bypass Blocks — No Skip Navigation Link

seriousWCAG 2.4.1 · Level Acms scope

Your website lacks a 'skip to main content' link that allows keyboard users to bypass repetitive navigation menus. People who can't use a mouse must tab through dozens of navigation items on every page to reach the actual content. Under ADA Title II, this creates an unreasonable barrier to accessing government services.

Who Is Affected

Keyboard-only users, including people with motor disabilities who cannot use a mouse, blind users navigating with screen readers, and anyone using assistive technology that relies on keyboard navigation.

What This Means

When someone navigates your site using only the Tab key, they must move through every single navigation link, search box, and menu item before reaching the main page content. On a typical government site with 20-30 navigation links, this means pressing Tab 30+ times on every page just to read the content.

A skip navigation link solves this by providing a shortcut directly to the main content area. It appears when a keyboard user presses Tab for the first time on any page, allowing them to bypass repetitive navigation elements.

Fix: CMS / Theme

This requires adding code to your site's template header. The skip link must be the very first focusable element on every page.

Joomla Implementation

  1. Open your active template's index.php file via System → Site Templates → [Your Template].
  2. Add this code immediately after the opening <body> tag:
<a href="#main-content" class="skip-link">Skip to main content</a>
  1. Add this CSS to your template's stylesheet:
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus {
  top: 6px;
}
  1. Ensure your main content area has id="main-content" in the template.

WordPress Implementation

  1. Edit your active theme's header.php file via Appearance → Theme Editor.
  2. Add the skip link code immediately after <body <?php body_class(); ?>>:
<a href="#main" class="skip-link screen-reader-text">Skip to main content</a>
  1. Add CSS to your theme's style.css:
.skip-link {
  background: #f1f1f1;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #21759b;
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  left: -9999em;
  outline: none;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: none;
  top: -9999em;
}
.skip-link:focus {
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 7px;
  width: auto;
  z-index: 100000;
}
  1. Verify your main content area uses id="main" or update the href accordingly.

Fix: Content Editor

Content editors cannot fix this issue — it requires template-level changes that must be implemented by IT staff or web developers.

However, content editors can help by:

  1. Ensuring the main content area on each page has a clear, descriptive heading structure
  2. Reporting pages where the skip link doesn't work properly
  3. Testing the skip link by pressing Tab when the page loads

Standard Reference

WCAG 2.1 Success Criterion 2.4.1 — Bypass Blocks, Level A

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Helpful Tools

Check if your government website has this issue

OctoComply scans your website and documents for WCAG 2.1 AA violations. The free tier covers up to 10 pages.

Run a Free Scan