The 'Skip to Content' Link: The Three-Line Accessibility Fix 80% of Small Business Sites Are Missing

Open your homepage. Click on the address bar. Press Tab.

If your site is well built, the focus indicator — the little outline that shows you which thing on the page is currently selected — should land on a link that says something like “Skip to main content” or “Skip to content” or “Skip navigation.” On most small-business websites in 2026, it does not. It lands instead on your logo, then on each of the 14 items in your top navigation, then on the search box, then on the three CTAs in your hero, then maybe — if the user has the patience — on the actual article they came to read.

That is what a missing skip link feels like. For a keyboard user, a screen reader user, or someone using voice control, it is the difference between landing on your content in one keystroke and landing on it in forty-five. And the fix is roughly three lines of HTML and CSS.

This is the smallest, cheapest, highest-leverage accessibility feature on the web. It is also the one most small-business sites get wrong, even the ones that have one. Here is what it actually is, why every site needs it, the WCAG criterion that mandates it, and how to add a working one to your site this afternoon — without a developer, and without breaking the rest of your design.

A skip link is an anchor link, usually the very first interactive element on the page, that jumps the reader past your header navigation and lands focus directly on the main content of the page. It is the keyboard-and-assistive-technology equivalent of a “skip to recipe” button on a food blog.

The implementation is unglamorous. It is a normal HTML link — <a href="#main">Skip to main content</a> — placed at the very top of your <body>. The link is targeted at an element on the page that has the matching id, usually the <main> landmark or the first <h1> heading. When a keyboard user presses Tab the very first time after the page loads, the skip link receives focus. When they press Enter or Space, focus jumps to the main content, and the next Tab moves them through the article.

A normal sighted mouse-using visitor never sees the skip link, because it is positioned off-screen with CSS until the moment a keyboard user focuses it. At that moment, it slides into view, usually in the top-left corner of the viewport. It is one of the rare accessibility features where the cost to non-disabled visitors is zero — the link is literally invisible to them.

Who actually uses it

The conventional answer is “keyboard users and screen reader users,” which is true but underestimates the population. The people who benefit from a working skip link include:

Screen reader users. A blind person navigating your site with JAWS, NVDA, or VoiceOver typically uses landmark navigation (jumping by <header>, <nav>, <main>, <footer>) or heading navigation (jumping by <h1>, <h2>, <h3>). A skip link is the fast-forward button that gets them straight to the first piece of new content on a page when the landmarks are missing or misused, which is most of the web.

Keyboard-only users. Some people use a keyboard because they cannot use a mouse — arthritis, repetitive strain injury, tremor, paralysis, prosthetic limbs, broken arms. Some people use a keyboard because they prefer it. Either way, every Tab keystroke is a small cost, and on a site with a 14-item primary navigation plus a mega-menu, the cost to get from the top of the page to the article is significant.

Voice control users. Someone using Dragon NaturallySpeaking, Voice Control on macOS, or Voice Access on Android can say “click skip to main content” and skip the navigation in one utterance. Without the link, they have to say “click” forty times.

Switch users. A person using a single-switch or two-switch input device cycles through every focusable element on the page one at a time. A skip link saves them an extraordinary amount of time and physical effort.

Power users. Many sighted, non-disabled users prefer keyboard navigation for speed. Browser extension authors, developers, accessibility testers, and the occasional Hacker News commenter who insists Vim is the only acceptable editor will use your skip link if it exists.

The skip link is not a niche accommodation. It is a universal-utility feature that disproportionately benefits a vulnerable population.

The WCAG criterion that mandates it

WCAG 2.4.1, “Bypass Blocks,” is a Level A success criterion — which means it is the minimum required conformance level, the floor of accessibility, the level below which a site is considered inaccessible by every regulator on Earth. The criterion reads: “A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.”

A “block of content that is repeated” is your header navigation. The “mechanism to bypass” it is the skip link. WCAG explicitly lists “providing a link at the top of each page that goes directly to the main content area” as the canonical technique for satisfying 2.4.1. There are other ways to satisfy the criterion — using proper landmark regions, for example — but the skip link is the most universally supported and the easiest to verify.

This matters because Level A is the floor. The ADA Title III, the European Accessibility Act, Section 508, AODA, and every other accessibility regulation we know of effectively require WCAG 2.1 AA or 2.2 AA conformance, both of which include all Level A criteria. A site without a skip link or an equivalent bypass mechanism is non-conforming. We have seen demand letters specifically call out the missing skip link as evidence of non-conformance.

You can read more about how the WCAG levels map to legal exposure in our WCAG 2.2 Explained in Plain English post.

Adding a skip link to your site is not enough. The link has to actually work, and most existing implementations have one or more of the following bugs:

The skip link is hidden with display: none. This is the most common failure. Someone added a skip link, then hid it with CSS so it would not visually clutter the layout. The problem: display: none removes the element from the accessibility tree. Screen readers do not announce it, and keyboard focus skips past it. The skip link is, functionally, not there. The correct approach is to position the link off-screen with position: absolute; left: -9999px; (or a .sr-only utility class) and bring it back on focus with :focus { position: static; } or similar.

The skip link target does not exist or has no tabindex. The link says href="#main" but there is no element with id="main" on the page. Or the element exists but is not focusable — a <div> instead of a <main> landmark, with no tabindex="-1". Pressing the skip link does nothing visible. The fix is either to make the target a <main> element (which is implicitly focusable when targeted) or to add tabindex="-1" to whatever element you are jumping to.

The skip link is the third or fourth focusable element, not the first. A cookie consent banner, a search modal, or a “live chat” widget receives focus before the skip link. By the time the skip link receives focus, the keyboard user has already tabbed through four things. Move the skip link to the absolute first position in the <body>, before any banner, widget, or chat bubble.

The skip link is invisible even when focused. The .sr-only class hides the link off-screen and never brings it back. A sighted keyboard user has no idea where they are. The skip link must become visible — with a clearly-defined background color, text color, and outline — the moment it receives focus. This is non-negotiable.

The skip link does not announce when focused. Some implementations use aria-hidden="true" on the link, which removes it from the accessibility tree and silences it for screen readers. Some use empty link text or a screen-reader-only label that does not survive translation. The link text should be plain, visible text: “Skip to main content” or “Skip to content.”

You can audit your existing skip link in two minutes. Open your homepage. Click on the address bar. Press Tab once. You should see a clearly-visible link near the top-left of the viewport that says “Skip to main content.” Press Enter. The page should visibly shift focus to the article content. If any of those three things does not happen, your skip link is broken.

How to add one on the major platforms

Adding a skip link is genuinely fast on most platforms, even ones that do not give you direct HTML access.

WordPress. Most modern, accessibility-aware WordPress themes (Twenty Twenty-Four, GeneratePress, Astra, Kadence) ship with a working skip link. If yours does not, you have two options: switch to a theme that does, or add the link manually through the theme’s header template (Appearance > Theme File Editor > header.php). Place <a href="#main" class="skip-link screen-reader-text">Skip to main content</a> immediately after the opening <body> tag, then add the CSS to make it visible on focus. WordPress provides a built-in screen-reader-text utility class that handles the off-screen positioning correctly.

Shopify. The Dawn theme and most accessibility-aware free themes (Sense, Refresh, Studio) ship with a working skip link. Older themes (Debut, Brooklyn, Narrative) often do not. Edit your theme code (Online Store > Themes > Actions > Edit code), open theme.liquid, and add the skip link as the first line inside the <body> tag. Make sure the link target points at the <main> element of your layout.

Squarespace. Squarespace 7.1 sites have a skip link injected automatically into the page template. Squarespace 7.0 sites do not. If you are on 7.0 and cannot migrate, you can inject one with Code Injection (Settings > Advanced > Code Injection > Header), though Squarespace’s structure makes this fragile. See our Squarespace Accessibility Guide for the specific approach.

Wix. Wix Studio sites since 2024 include a built-in skip link by default. Wix Editor (the older interface) does not, and there is no straightforward way to inject one without leaving the platform. This is one of the seven reasons we flagged in our Wix Accessibility post — the Editor’s lack of skip-link support is a genuine compliance gap.

Webflow. Webflow lets you add a skip link as a regular link element. Place it at the very top of the Body section in the Navigator, set the href to #main-content, and add custom CSS (in the Custom Code section of the page settings) to position it off-screen until focused. Then assign id="main-content" to the main content section of every page template.

If you are on any other platform — Carrd, Notion, Framer, Ghost — check the platform’s documentation for “skip link” or “skip to content.” Most modern platforms have either built-in support or a documented snippet.

Once it is in place, test it on at least three pages of your site: the homepage, a service or product page, and a blog post or article. The test is the same as before. Load the page, click the address bar, press Tab once. You should see a visible link. Press Enter. The page should jump.

If you have a screen reader installed, try the same test with VoiceOver on macOS (Cmd+F5 to turn on) or NVDA on Windows (free download from nvaccess.org). The skip link should be the first thing announced after the page title. Activating it should move screen-reader focus into the main content.

If you do not have a screen reader installed, our Test Your Website with VoiceOver in 10 Minutes post walks through the setup.

A working skip link is not a complete accessibility solution. It does not fix unlabeled form inputs, missing alt text, low color contrast, or any of the other issues we cover in our 5-Minute Accessibility Audit. But it is the single most cost-effective fix on the WCAG checklist, and the absence of one is a reliable signal that the rest of the site has not been audited either.

If you do nothing else this GAAD week, ship a skip link.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.