The skip to content link: one that appears on focus and lands in the right place
A skip to content link is the first focusable element on a page. It's hidden until someone presses Tab, then appears and lets keyboard and screen reader users jump past the header and navigation to the main content. It should say "Skip to main content", point at the main element's id, and be clearly visible when focused.
The problem it solves
Someone using a keyboard moves through a page one focusable element at a time. If every page starts with a logo link, eight navigation links, a search box and an account button, they press Tab eleven times on every page before reaching anything new. Screen reader users who read in order face the same thing. WCAG's Bypass Blocks criterion, at level A, asks for a way past content that repeats across pages. A skip link at the top is one of the techniques it lists; marking regions with landmarks and starting sections with headings are others.
Building a skip link that works
- Put it first in the body, before the header, so it's the first Tab stop.
- Point it at the main content:
<a class="skip" href="#main">Skip to main content</a>, with<main id="main">further down. - Hide it off-screen until focused, not with
display: none. Position it outside the viewport, then bring it back on:focus. WebAIM's skip navigation guide explains whydisplay: noneor thehiddenattribute removes it from the keyboard order entirely. - Make it obvious when it appears: a solid background, high-contrast text, a visible focus ring, positioned at the top left, above the header.
- Name the destination. "Skip to main content" says where you'll land. "Skip navigation" only says what you're leaving.
A minimal style might look like this: .skip{position:absolute;left:8px;top:-60px} and .skip:focus{top:8px}, with the site's own colours and focus outline. Avoid tricks such as making it transparent, colouring it the same as the background, or sizing it to one pixel; WebAIM lists these as causing problems of their own.
Why skip links fail
- The target doesn't exist
- The href points to
#contentwhile the main element hasid="main", or no id at all. The link scrolls nowhere. - Focus doesn't move
- The page scrolls, but the next Tab press continues from the top. Pointing at an element with an id usually moves the starting point correctly in current browsers; if it doesn't, add
tabindex="-1"to the target. - The sticky header covers the target
- The browser scrolls the main content to the very top of the window, underneath a fixed header, so the first heading is hidden.
- It never appears
- It's hidden with
display: none, or the focus style was removed globally. - It's the second link
- A cookie banner or announcement bar comes first in the source, so the skip link isn't where people expect it.
Skip links and sticky headers
Sticky headers cause trouble beyond skip links. WCAG's Focus Not Obscured criterion, at level AA, fails a page where a sticky header or footer completely hides the element that has keyboard focus, and it lists CSS scroll-padding as a fix. Setting scroll-padding-top on the html element to the header's height means in-page jumps, including the skip link, stop just below the header instead of behind it. It also helps every in-page link in your navigation.
Do landmarks replace skip links?
Partly. Screen readers can list a page's landmarks, such as banner, navigation, main and contentinfo, and jump straight to main, and they can move between headings. A page with a main element, a labelled nav and a sensible heading outline gives screen reader users a way past repeated blocks without a skip link. Sighted keyboard users don't have those shortcuts in most browsers, though, so a skip link still helps them, especially on sites with long navigation. On a single page with a header of three links, the benefit is small; on a site with a mega menu it's large.
- Use one
mainelement per page and put the primary content in it. - Label each
navif there's more than one, for example "Main" and "Footer". - Start each section with a real heading. See heading structure for accessibility.
- Keep a visible focus style everywhere; see focus state design.
Skip links and Anticode
Pages from Anticode's design engine place their content inside a main element and label the header navigation, which screen reader users can jump between, and since 23 October 2026 the design gate blocks publishing any page without a visible keyboard focus style, the other half of what makes a skip link usable. Their headers are short: a name, a few section links and one button.
They don't include a visible skip link today, and the header stays at the top as you scroll. Because the code editor keeps only text, section order and colour tokens, you can't add a skip link or scroll padding by hand. If your site needs one, for example because the navigation is long, ask for it in an app build, or add it after exporting the site as a Next.js project.
Questions people ask
Does my website need a skip link?
It's one way to meet WCAG's Bypass Blocks requirement. If your pages have main landmarks and headings, screen reader users already have shortcuts, but a skip link still helps sighted keyboard users past long navigation.
Why is my skip link not working?
Check that the href matches an id that exists, that the link isn't hidden with display none, and that a sticky header isn't covering the place it lands.
What should a skip link say?
"Skip to main content" is the clearest wording, because it names the destination.