Short answer: A skip link is the first thing the Tab key reaches on a page, usually a link that says “Skip to main content”. It takes keyboard and screen reader users past the header and the menu, straight to the content. It can stay hidden until someone presses Tab, but then it has to show up and move the focus.
What a skip link solves
Most pages repeat the same blocks before the content: the logo, the menu, sometimes a search box or a banner. A mouse user skips them with one click. Someone on a keyboard has to Tab through every link, on every page.
W3C says that can mean dozens of keystrokes before the first link in the main content. It can take a long time and may cause severe physical pain for some users. Screen reader users would hear the header and the navigation links again on each page.
WCAG success criterion 2.4.1, Bypass Blocks, at Level A, asks for a mechanism to bypass blocks of content repeated on multiple pages. A skip link is the most common one, and W3C lists others.
| Way to skip repeated blocks | What it adds | W3C technique |
|---|---|---|
| Skip link | A link at the top of each page that goes straight to the main content | G1 |
| Link past a block | A link at the start of a repeated block that goes to its end | G123 |
| Links to each area | Links at the top of the page to each area of the content | G124 |
| Landmarks | ARIA landmarks that mark the regions of the page | ARIA11 |
| Headings | A heading element at the start of each section | H69 |
From W3C’s Understanding SC 2.4.1, read November 4, 2026.
How to build a skip link
WebAIM describes it as a link at the top of the page that jumps to the beginning of the main content area. The usual target is the <main> element. MDN notes that an id on <main> lets it be the target of a skip link.
Point the link at that id, and keep one main element per page. MDN says a document mustn’t have more than one <main> element without the hidden attribute. Our anchor links guide covers linking to any section of a page.
For the wording, WebAIM prefers “Skip to main content”, since it says where the link goes rather than what it skips. One link is usually enough, though a very complex page with several repeated blocks may need more.
Hidden until it gets focus
W3C says it’s preferable to keep skip links visible at all times. Many keyboard users see the screen, such as switch users, screen magnifier users and people using voice recognition. Still, the criterion doesn’t require the link to show while it doesn’t have focus.
If you hide it, WebAIM lists the conditions. It’s hidden by default, keyboard navigation reaches it, it becomes prominently visible when focused, and it sets the focus on the main content when activated.
Hide it off screen with CSS. Our visually hidden text guide shows the classes that do it. Hiding it with display:none or the hidden attribute takes it out of keyboard navigation, so nobody can use it. Our keyboard navigation guide covers the full keyboard test, and our website navigation guide covers the menu the link skips.
How to add a skip link, step by step
- Wrap the main content of each page template in one
<main>element with an id. - Put a link to that id first in the page, before the logo and the menu.
- Label it “Skip to main content”, and translate it on pages in other languages.
- Hide it off screen with CSS, never with
display:noneor the hidden attribute. - Bring it on screen when it gets keyboard focus, with strong contrast.
- Make sure Enter moves the keyboard focus to the main content, not only the scroll.
- Test it on a first visit: press Tab, then Enter, then Tab again.
How our skip links did in W3C’s test
W3C’s technique G1 ends with a test of five checks. On November 4, 2026, we ran it as a first-time visitor on six of our pages, on a desktop screen and on a phone: the home, a guide, pricing and contact in English, and the home and the same guide in Spanish.
In all 12 runs, the first Tab reached “Skip to main content”, hidden until then and shown at the top left once focused. On the Spanish pages it reads “Saltar al contenido principal”. Pressing Enter and then Tab always landed on the first link of the main content. A second link, “Skip to footer”, took the focus to the footer.
We also counted the <main> elements on all 488 pages of our sitemap at 6:03 PM. Of those, 486 had one, but our two home pages had a second one nested inside the first. We changed that inner block to a plain container at 6:08 PM, and at 6:15 PM all 488 pages had one.
Check your skip link
- The first Tab on the page reaches the skip link.
- Its text says where it goes.
- It shows on screen when it has focus.
- It’s hidden with CSS, not with
display:noneor the hidden attribute. - After Enter, the next Tab lands inside the main content.
- Each page has a single
<main>element without the hidden attribute.
RememberA skip link only works if it moves the focus. Scrolling the page isn’t enough, so test it with the keyboard, the way the people who need it use it.
Pages that work with a keyboard are part of our web design service.
Quick answers about skip links
What does “Skip to main content” mean?
It’s a link at the top of a page that takes keyboard and screen reader users past the header and the menu, straight to the main content. Many sites hide it until someone presses the Tab key, and it then shows up at the top of the screen.
Does WCAG require a skip link?
WCAG success criterion 2.4.1, at Level A, requires a way to bypass blocks of content repeated across pages. A skip link to the main content is one of the techniques W3C lists as sufficient. ARIA landmarks and headings at the start of each section are others.
Does a skip link have to be visible all the time?
No. W3C says it’s preferable to keep skip links visible at all times, since many keyboard users can see the screen. Its criterion also accepts links that only show when they have focus. If you hide yours, make it stand out when it appears.
Where should a skip link point?
To the start of the main content. The usual way is to give the main element an id and use that id as the link’s target. MDN says a page mustn’t have more than one main element without the hidden attribute.
Do I need more than one skip link?
Usually not. WebAIM says a single skip link is enough in most cases, and a page with very few links before the main content may not need one at all. A very complex page with several repeated blocks may need more.
Sources
Read on November 4, 2026. W3C: Understanding SC 2.4.1 and Technique G1. MDN Web Docs: <main> HTML main element. WebAIM: Skip Navigation Links. Our case: our own pages tested with the keyboard, read on November 4, 2026.