# Skip Link: Jump Straight to the Main Content

Source: https://allyway.ai/glossary/skip-link

A skip link is a link at the very top of a page that jumps to the main content, so keyboard and screen reader users do not have to pass the whole menu on every page. It is a sufficient technique for WCAG 2.4.1.

A skip link is the first link on a page, usually labelled "Skip to main content". It lets keyboard and screen reader users jump past the logo, the menu and the search bar straight to the content they came for. Without it, a menu with 40 links means 40 presses of Tab – on every single page.

## What it means

The skip link is the classic way to meet [WCAG 2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html), a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2): "A mechanism is available to bypass blocks of content that are repeated on multiple web pages." Typical repeated blocks are the header, the main navigation and advertising areas. Via [EN 301 549](https://allyway.ai/regulations/en-301-549) (clause 9.2.4.1), the requirement is also part of the [European Accessibility Act](https://allyway.ai/regulations/eaa).

The W3C names who benefits: screen reader users, who no longer hear the same header on every page; people who rely on [keyboard navigation](https://allyway.ai/glossary/keyboard-navigation), who reach the content with fewer keystrokes; and screen magnifier users, who no longer have to search for where the content starts.

A skip link is not the only way to pass 2.4.1. The W3C lists several sufficient techniques:

| Technique | W3C ID | What it does |
|---|---|---|
| **Skip link to the main content** | G1 | Link at the top of each page jumps to the content |
| **Link at the start of a repeated block** | G123 | Jumps to the end of that block |
| **Links to each content area** | G124 | A small table of contents at the top |
| **Headings at the start of sections** | H69 | Screen reader users jump by heading |
| **Landmarks** | ARIA11 | [ARIA landmarks](https://allyway.ai/glossary/aria-landmarks) mark header, navigation and main |

> **Tip:** > **Use both: skip link and landmarks**
> Landmarks and headings help screen reader users, but sighted keyboard users have no built-in shortcut to them in most browsers. A skip link serves both groups.

## Examples

```html title="Example"
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>… logo, navigation with 40 links …</header>
  <main id="main" tabindex="-1">
    <h1>Running shoes</h1>
  </main>
</body>

<style>
  .skip-link { position: absolute; left: 8px; top: -100px; }
  .skip-link:focus { top: 8px; background: #ffffff; color: #1a1a1a; padding: 8px 16px; }
</style>
```

The link stays off-screen until it receives focus, then slides into view. `tabindex="-1"` on the target lets the browser move focus there reliably, so the next Tab continues inside the main content.

**Do:** Do

Make the skip link the first focusable element, show it clearly as soon as it receives focus, use a plain label like "Skip to main content" and point it to an `id` that exists on every page.

**Don't:** Don't

Hide the link with `display: none` (it can no longer receive focus), let it stay invisible when focused, or point it to a target that a template no longer contains.

A skip link hidden off-screen must become visible on focus – otherwise sighted keyboard users press Tab and nothing seems to happen, which also fails [focus visible](https://allyway.ai/glossary/focus-visible).

## How to test a skip link



## Questions

Q: What is a skip link?
A: A link at the top of a page that jumps straight to the main content. It lets keyboard and screen reader users skip the header and navigation that repeat on every page.

Q: Is a skip link required by WCAG?
A: Not by name. WCAG 2.4.1 Bypass Blocks requires a way to skip repeated blocks. A skip link is the most common sufficient technique; headings and landmarks are others. Many audits still expect a skip link because it also serves sighted keyboard users.

Q: Should the skip link always be visible?
A: It may stay hidden until it receives focus, but then it must become clearly visible. A link that receives focus while staying invisible confuses sighted keyboard users.

Q: Why does my skip link not work?
A: The usual causes: the target `id` does not exist, the link is hidden with `display: none`, or focus does not move to the target. Adding `tabindex="-1"` to the target element usually fixes the last one.

Q: How can I check my website for missing skip links?
A: Press Tab once on each page template. For a broader check of navigation and structure issues, run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) on your homepage.