Why does my skip link scroll the page but not move keyboard focus?

Because the target element can’t receive focus. Activating a skip link points the browser at the element whose id matches the href, but non-interactive elements like , , or don’t accept focus by default — so the page scrolls while focus stays at the top, and the next Tab carries on from the header. The fix is tabindex="-1" on the target, which makes it programmatically focusable without adding it to the normal tab order. This generator always emits the targets with tabindex="-1" for exactly this reason.

Where exactly does the skip link markup go?

As the very first focusable element inside , before the header, logo, and navigation. If anything focusable comes before it, the user’s first Tab press won’t reach the skip link and it can’t do its job. In most apps that means rendering it at the top of your root layout, ahead of everything else.

Why use the clip pattern instead of display:none or visibility:hidden to hide it?

display:none and visibility:hidden remove the element from the accessibility tree and the tab order entirely, so a keyboard user can never focus the link to reveal it — which defeats the whole purpose. The clip pattern (a 1px clipped box that stays in the layout) keeps the link focusable while hiding it visually, then the :focus rule brings it back into view. That’s the pattern this tool generates, and it’s the same one Tailwind’s sr-only utility uses.

What’s different about the Next.js output?

For skip links you want a plain , not Next’s component. The skip link is an in-page hash jump, not a route navigation — using can intercept the click, interfere with the focus move, and add no benefit. The React/Next output also switches class to className and tabindex to tabIndex={-1} so it drops straight into JSX.

Should the skip link be visible all the time or only on focus?

Both pass WCAG 2.4.1. The most common choice is to reveal it only on keyboard focus, so it stays out of the visual design for mouse users but appears the instant a keyboard user Tabs to it. An always-visible skip link is arguably more discoverable and is also perfectly valid — toggle “Hide until focused” to switch between the two.

When should I provide more than one skip link?

On pages with several distinct regions a keyboard user might want to jump to — for example main content, primary navigation, a search box, and the footer. When you add more than one, the tool wraps them in a so screen-reader users get them grouped as a recognisable landmark. A simple page is fine with just “Skip to main content”.

Skip Link Generator

Generate real, working skip-navigation links — not just the anchor, but the reveal-on-focus CSS done the robust way (clip, not display:none) and the matching target elements with id + tabindex="-1" so keyboard focus actually lands where it should. Add multiple targets, switch between plain CSS and Tailwind, and HTML, React, or Next.js, then Tab through the live demo to feel it work. Satisfies WCAG 2.4.1 Bypass Blocks.

About this ToolHow it works, benefits & use cases

Most skip-link generators hand you an anchor and stop there — which is why so many “done” skip links don’t actually move keyboard focus. This one generates the whole working package: the skip-link markup (wrapped in a <nav aria-label="Skip links"> when you have more than one), the reveal-on-focus CSS done the robust way (the clip pattern, never display:none, which would make the link unreachable), and — the part everyone forgets — the matching target elements with both an id and tabindex="-1" so that activating the link moves DOM focus into that region and the next Tab continues from there. Add as many targets as you need (Skip to main content → #main-content, Skip to navigation → #main-nav, Skip to search → #search, Skip to footer → #footer), reorder them, and choose plain CSS or Tailwind utility classes, and HTML, React, or Next.js output. A live, Tab-able demo lets you feel the focus jump, and an audit checks the rules skip links live or die by: at least one target, unique ids, must-be-first-focusable, tabindex on targets, and clear labels. Satisfies WCAG 2.4.1 Bypass Blocks.

How to Use

1Add your skip targets — type a label (“Skip to main content”) and the element id it jumps to (“main-content”), or add a common target with one click.
2Reorder targets with the up/down buttons; the order is the Tab order the user experiences.
3Pick plain CSS or Tailwind for the styling, and HTML, React, or Next.js for the output dialect.
4Keep “Hide until focused” on for the standard reveal-on-focus behaviour, or turn it off for an always-visible link.
5Copy the generated links + CSS + targets, paste the links as the FIRST element in <body>, and make sure each target keeps its tabindex="-1".

Key Benefits

Generates the links, the CSS, AND the matching focusable targets — not just the anchor
Targets ship with id + tabindex="-1" so keyboard focus actually lands in the region
Reveal-on-focus CSS uses the clip pattern, never display:none (which breaks reachability)
Plain-CSS or Tailwind utility output, for HTML, React (className/tabIndex), or Next.js
Live, Tab-able demo so you can feel the focus jump before you ship it
Audit flags missing/duplicate/invalid ids, vague labels, and the must-be-first-focusable rule
Shareable URL captures every target, the flavor, framework, and visibility choice

Common Use Cases

Adding a single “Skip to main content” link to satisfy WCAG 2.4.1 Bypass Blocks (Level A)
Building a multi-target skip menu for a complex layout (content, nav, search, footer)
Getting the Next.js detail right — a plain <a> hash link, not <Link>, for the skip jump
Copying a Tailwind-class version so it matches an existing utility-first codebase
Fixing a skip link that scrolls but doesn’t move focus by adding tabindex="-1" to the target

Try it — click inside, then press Tab

headernav

main content

Activating the link jumps focus here — the next Tab continues from this region.

The link is off-screen until it gets keyboard focus, then it appears — exactly what the generated code does.

Generated code

Skip links + CSS + targets — React · Plain CSS

<!-- Skip links -->
<nav aria-label="Skip links" className="skip-links">
  <a className="skip-link" href="#main-content">Skip to main content</a>
  <a className="skip-link" href="#main-nav">Skip to navigation</a>
</nav>

/* CSS — add to your global stylesheet */
/* Off-screen until focused — the robust, AT-friendly pattern.
   We use clip + a 1px box (not display:none, which would make the
   link unreachable to keyboard and screen-reader users). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: #111827;
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

<!-- Matching targets — note id + tabindex="-1" -->
<main id="main-content" tabIndex={-1}>
  …
</main>

<nav id="main-nav" tabIndex={-1}>
  …
</nav>

Matching target elements

The piece most generators skip: each region gets an id AND tabindex="-1" so focus lands there and the next Tab continues from the target.

<main id="main-content" tabIndex={-1}>
  …
</main>

<nav id="main-nav" tabIndex={-1}>
  …
</nav>

Ready to ship

Remember: the skip link must be the FIRST focusable element in <body>, before the header and nav.· 2.4.1 Bypass Blocks (A)
Each target needs tabindex="-1" so activating the link actually moves keyboard focus into that region.

Skip targets

2 links

Label

Target id

href="#main-content"

Label

Target id

href="#main-nav"

Common targets

Styling

CSS flavor

Framework

Hide until focusedOff-screen for mouse users, revealed when a keyboard user Tabs to it (most common).

Wiring notes

•Place the skip link(s) as the very first focusable element inside <body>, before the header and nav.
•Each target carries tabindex="-1" so focus lands there and the next Tab continues from the target.
•Add the generated CSS to your global stylesheet — it uses the clip pattern, not display:none.
•In React, tabindex becomes tabIndex={-1} and class becomes className.

Why skip links exist

Every page repeats the same header, logo, and navigation. A keyboard or screen-reader user would have to Tab through all of it on every page just to reach the content. A skip link lets them jump straight past those blocks — which is exactly what WCAG 2.4.1 Bypass Blocks (Level A) requires.

The two rules people get wrong

It must be first. The skip link has to be the very first focusable element in <body> — before the header — or the first Tab won’t reach it.
The target must take focus. A bare <main> won’t accept focus, so the page scrolls but keyboard focus stays at the top. Add tabindex="-1" to the target so focus moves there and the next Tab continues from the content.

Hide it with the clip pattern, never display:none — that would make it unreachable to the very users it’s meant to help.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Skip Link Generator

How to Use

Key Benefits

Common Use Cases

Try it — click inside, then press Tab

Skip targets

Styling

Wiring notes

Why skip links exist

The two rules people get wrong

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Skip Link Generator