OneTaskBy Tim King · Updated
Skip Link Generator
Skip to Main Content Link That Shows on Focus, With HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Skip Link Generator works
This skip link generator writes an accessible skip-to-content link. A skip link is the first thing a keyboard user reaches on a page: invisible until Tab is pressed, then a clear button that jumps past the header and navigation to the content. Set the text, the id it points at and the colours, switch the preview between hidden and focused, and copy markup and CSS that hides it correctly and makes the jump work in every browser.
Skip link generator: hidden until focused
WCAG 2.4.1, Bypass Blocks, requires a way to skip content repeated across pages. A skip link is the simplest mechanism and one of the most valuable: without it, a keyboard user on a site with forty navigation links presses Tab forty times on every page before reaching anything new. Screen reader users have landmarks and headings to jump with, but sighted keyboard users, switch users and people using voice control have no such shortcut, and the skip link is for them.
Hiding it correctly. The link must be in the tab order while invisible, so display: none
and visibility: hidden are out; both remove it from the keyboard entirely. The clip
technique shrinks the link to a one pixel box and clips it to nothing, then restores the size
on :focus. The off-screen technique moves it above the viewport with a transform and slides
it into view on focus, which allows a small animation. Both leave it reachable, and neither
relies on left: -9999px, which can cause horizontal scrolling in right-to-left layouts.
Making the jump land. Clicking an in-page link scrolls to the target, but whether focus
moves there depends on the browser and on whether the target is focusable. Give the <main>
element tabindex="-1" and focus moves reliably, so the next Tab press goes to the first link
inside the content rather than back to the header. The generated CSS removes the outline on
the target itself, since a focus ring around the entire main area is confusing.
Placement. The link belongs at the very start of <body>, before the header, so it is the
first Tab stop. If a cookie banner or a modal is injected before it, the skip link is no longer
first and loses much of its point.
Appearance. When shown, the link should look like a deliberate control: solid background, high contrast text, and a focus ring. It is often the first impression a keyboard user gets of whether a site has been tested with a keyboard at all. Check the text and background colours in the contrast checker.
More than one. Pages with several repeated blocks can offer several links, such as "Skip to navigation" and "Skip to search", each pointing at a different id. Keep them short and put the most useful first.
FAQ
Should the skip link be visible all the time?
It can be, and some government sites do that. Showing it only on focus is the usual compromise between accessibility and design, and it is fully compliant as long as it appears on keyboard focus. Never hide it in a way that removes it from the tab order.
The link scrolls but focus stays on it. Why?
The target is not focusable. Add tabindex="-1" to the <main> element as in the generated
markup. Without it, some browsers keep focus on the link, and the next Tab press goes to the
navigation the user was trying to skip.
Does it work with a sticky header?
The target scrolls under the sticky header unless you add scroll-margin-top equal to the
header height on the <main> element. That is a one-line addition to the generated CSS.
Is a skip link needed on a single page app?
Yes, and it needs care: after a client-side route change, move focus to the new content or to the skip link so the user is not left at the bottom of the previous page. The link itself works the same as on any page.
See also: all Accessibility tools, Dev Utilities, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, AI.
Related tools
Tab Order Tester
List every Tab stop in your HTML in order and flag focus order problems.
Contrast Checker
Check colour contrast against WCAG and APCA.
Touch Target Checker
Check a control's size and spacing against WCAG, Apple and Android minimums.
0–60 Calculator
0–60 mph, 0–100 km/h and quarter mile from power and weight.
1920s Name Generator
Jazz Age names, from Chester Vanderbeck III to Millie Kowalski the flapper.